@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&display=swap');

  /* ============================================================
     BONNAPPLI BRAND REFRESH — 2026-05-23
     Editorial palette: cream + antique gold + charcoal
     Typography: Cormorant Garamond (display) + Inter (UI)
     Goal: redirect existing tokens so all components pick up
     the new look without rewriting individual rules.
     ============================================================ */

  :root{
    /* ---- New core palette (from brand guide) ---- */
    --bn-cream:        #F7F2EA;   /* Warm Cream — page canvas */
    --bn-ivory:        #FFFCF6;   /* Soft Ivory — cards / surfaces */
    --bn-charcoal:     #090B0A;   /* Charcoal Black — sidebar, primary CTA */
    --bn-charcoal-90:  #1A1C1A;
    --bn-charcoal-80:  #2A2C2A;
    --bn-gold:         #B08A4A;   /* Antique Gold — accent, primary CTA text */
    --bn-gold-deep:    #8E6E37;
    --bn-gold-soft:    #D9BE8C;
    --bn-sage:         #9EA58D;   /* Muted Sage — botanicals, success */
    --bn-sage-soft:    #C3CAB5;
    --bn-clay:         #D8C6AB;   /* Clay Beige — secondary surface */
    --bn-clay-soft:    #ECE0CB;
    --bn-line:         rgba(176,138,74,.22);   /* warm hairline */
    --bn-line-strong:  rgba(176,138,74,.38);
    --bn-ink:          #1F1B16;   /* primary text — warm near-black */
    --bn-ink-soft:     #594F40;
    --bn-ink-muted:    #8B7E68;

    /* ---- Redirect ALL legacy brand tokens to the new palette ---- */
    --brand-ink:        var(--bn-ink);
    --brand-ink-soft:   var(--bn-ink-soft);
    --brand-coral:      var(--bn-gold);
    --brand-coral-deep: var(--bn-gold-deep);
    --brand-peach:      var(--bn-cream);
    --brand-peach-deep: var(--bn-clay-soft);
    --brand-cream-card: var(--bn-ivory);
    --brand-green-dark: var(--bn-charcoal);
    --brand-green:      var(--bn-sage);
    --brand-cream:      var(--bn-cream);
    --brand-orange:     var(--bn-gold);
    --brand-yellow:     var(--bn-gold-soft);
    --brand-brown:      var(--bn-ink-soft);
    --brand-plum:       var(--bn-sage);

    /* Coral spectrum -> gold spectrum (used by polish v4 buttons/pills) */
    --coral-50:  #FBF5EA;
    --coral-100: #F4E8CE;
    --coral-200: #E8D4A6;
    --coral-300: #D5B679;
    --coral-400: #C39E5C;
    --coral-500: var(--bn-gold);
    --coral-600: var(--bn-gold-deep);
    --coral-700: #6E5326;
    --grad-coral: linear-gradient(135deg,#C8A368 0%,#B08A4A 55%,#8E6E37 100%);

    /* Surfaces — cream/ivory instead of peach */
    --paper:   var(--bn-ivory);
    --paper-2: var(--bn-cream);
    --surface-0: var(--bn-cream);
    --surface-1: var(--bn-ivory);
    --surface-2: #FBF7EE;
    --surface-3: var(--bn-clay-soft);
    --warm-line: var(--bn-line);

    /* Re-tinted shadows (warm umber instead of aubergine) */
    --shadow-xs: 0 1px 2px rgba(40,30,15,.05);
    --shadow-sm: 0 1px 3px rgba(40,30,15,.07),0 1px 2px rgba(40,30,15,.04);
    --shadow-md: 0 6px 18px rgba(40,30,15,.08),0 2px 6px rgba(40,30,15,.05);
    --shadow-lg: 0 24px 50px rgba(40,30,15,.14),0 8px 20px rgba(40,30,15,.07);
    --shadow-card: 0 1px 3px rgba(40,30,15,.06),0 1px 2px rgba(40,30,15,.03);
    --shadow-soft-xs: 0 1px 2px rgba(40,30,15,.04);
    --shadow-soft-sm: 0 1px 3px rgba(40,30,15,.05),0 1px 2px rgba(40,30,15,.03);
    --shadow-soft-md: 0 4px 12px -2px rgba(40,30,15,.07),0 2px 5px rgba(40,30,15,.04);
    --shadow-soft-lg: 0 18px 36px -10px rgba(40,30,15,.12),0 6px 14px -4px rgba(40,30,15,.06);
    --shadow-soft-xl: 0 32px 64px -20px rgba(40,30,15,.18),0 14px 28px -8px rgba(40,30,15,.09);

    --ring-focus: 0 0 0 3px rgba(176,138,74,.28);

    /* Display serif → Cormorant Garamond */
    --font-display: 'Cormorant Garamond','Cormorant','Fraunces',ui-serif,Georgia,serif;
  }

  /* ============ Page canvas — drop pattern, go quietly cream ============ */
  html, body{
    background: var(--bn-cream) !important;
    background-image:
      radial-gradient(ellipse 60% 45% at 0% 0%, rgba(176,138,74,.06) 0%, transparent 60%),
      radial-gradient(ellipse 55% 50% at 100% 100%, rgba(158,165,141,.07) 0%, transparent 60%) !important;
    color: var(--bn-ink) !important;
  }
  body{ letter-spacing: 0; }

  /* ============ Display headings — Cormorant Garamond ============ */
  .hero-card h2,
  .recipe-hero h1,
  .auth-title,
  .empty-title,
  .modal-title,
  .recipe-title,
  .stat-num,
  .page-title{
    font-family: var(--font-display) !important;
    font-variation-settings: normal !important;
    font-weight: 600 !important;
    letter-spacing: -0.005em !important;
  }
  .hero-card h2{ font-weight: 500 !important; letter-spacing: -0.01em !important; }
  .auth-title{ font-weight: 600 !important; }
  .stat-num{ font-weight: 500 !important; }
  .recipe-title{ font-weight: 600 !important; letter-spacing: 0 !important; }
  /* Italic accent in headings, per brand guide ("something delicious.") */
  .hero-card h2 .accent,
  .recipe-hero h1 .accent{
    font-style: italic;
    font-weight: 500;
    color: var(--bn-gold);
    text-shadow: none;
  }

  /* ============ SIDEBAR — dark charcoal with gold accents ============ */
  .sidebar{
    background: var(--bn-charcoal) !important;
    background-image:
      radial-gradient(ellipse 80% 50% at 0% 0%, rgba(176,138,74,.10) 0%, transparent 60%),
      radial-gradient(ellipse 60% 60% at 100% 100%, rgba(176,138,74,.06) 0%, transparent 65%) !important;
    border-right: 1px solid rgba(176,138,74,.18) !important;
    padding: 26px 16px 26px !important;
  }
  .sidebar .brand{ padding: 6px 8px 32px !important; }
  .brand-mark{
    background: var(--bn-ivory) !important;
    box-shadow:
      0 4px 14px rgba(0,0,0,.32),
      inset 0 1px 0 rgba(255,255,255,.7),
      0 0 0 1px rgba(176,138,74,.30) !important;
  }
  .brand-name{
    font-family: var(--font-display) !important;
    font-weight: 500 !important;
    font-variation-settings: normal !important;
    letter-spacing: -0.01em !important;
    font-size: 26px !important;
  }
  .brand-name .b-bonn{ color: var(--bn-ivory) !important; }
  .brand-name .b-appli{
    color: var(--bn-gold) !important;
    text-shadow: none !important;
    font-style: italic;
  }
  .brand-sub{
    color: rgba(217,190,140,.55) !important;
    letter-spacing: .22em !important;
    font-weight: 500 !important;
    font-size: 9.5px !important;
  }
  .nav-btn{
    color: rgba(247,242,234,.62) !important;
    font-weight: 500 !important;
    letter-spacing: .005em !important;
  }
  .nav-btn:hover{
    background: rgba(176,138,74,.10) !important;
    color: var(--bn-ivory) !important;
    transform: none !important;
  }
  .nav-btn.active{
    background: rgba(176,138,74,.16) !important;
    color: var(--bn-ivory) !important;
    box-shadow: inset 0 0 0 1px rgba(176,138,74,.32) !important;
    font-weight: 600 !important;
  }
  .nav-btn.active::before{
    background: var(--bn-gold) !important;
    box-shadow: 0 0 10px rgba(176,138,74,.55) !important;
  }
  .nav-btn.active .nav-icon{
    color: var(--bn-gold) !important;
    filter: drop-shadow(0 0 4px rgba(176,138,74,.45)) !important;
  }
  .sidebar-foot{
    color: rgba(247,242,234,.32) !important;
    letter-spacing: .08em !important;
  }
  /* Bottom nav (mobile) — keep light but use gold accent */
  @media (max-width:820px){
    .bottom-nav{
      background: rgba(255,252,246,.95) !important;
      border-top: 1px solid var(--bn-line) !important;
    }
    .bottom-nav button.active{ color: var(--bn-ink) !important; }
    .bottom-nav button.active .nav-icon{
      color: var(--bn-gold) !important;
      filter: drop-shadow(0 2px 5px rgba(176,138,74,.30)) !important;
    }
  }

  /* ============ Primary CTA — black with gold text ============ */
  .btn-primary,
  button.btn-primary,
  .btn-accent,
  button.btn-accent,
  .btn-coral{
    background: var(--bn-charcoal) !important;
    background-image: none !important;
    color: var(--bn-gold) !important;
    border: 1px solid var(--bn-charcoal) !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
    font-size: 12.5px !important;
    box-shadow: 0 2px 6px rgba(0,0,0,.18), 0 6px 18px -8px rgba(176,138,74,.35) !important;
  }
  .btn-primary:hover, .btn-accent:hover, .btn-coral:hover{
    background: var(--bn-charcoal-90) !important;
    color: #D9BE8C !important;
    filter: none !important;
    box-shadow: 0 4px 12px rgba(0,0,0,.24), 0 10px 26px -8px rgba(176,138,74,.50) !important;
    transform: translateY(-1px);
  }
  .btn-primary:active, .btn-accent:active, .btn-coral:active{ transform: translateY(0); }

  /* Secondary — ivory with charcoal text, gold-on-hover border */
  .btn-secondary, button.btn-secondary{
    background: var(--bn-ivory) !important;
    color: var(--bn-ink) !important;
    border: 1px solid var(--bn-line-strong) !important;
    box-shadow: var(--shadow-xs) !important;
    letter-spacing: .04em !important;
  }
  .btn-secondary:hover{
    background: var(--bn-ivory) !important;
    border-color: var(--bn-gold) !important;
    color: var(--bn-charcoal) !important;
    box-shadow: 0 4px 12px -4px rgba(176,138,74,.30) !important;
  }
  .btn-ghost{
    color: var(--bn-ink-soft) !important;
    background: transparent !important;
    border-color: transparent !important;
  }
  .btn-ghost:hover{
    background: rgba(176,138,74,.08) !important;
    color: var(--bn-charcoal) !important;
  }
  .btn-success{
    background: linear-gradient(135deg,var(--bn-sage) 0%,#7E866A 100%) !important;
    color: var(--bn-ivory) !important;
  }
  .btn:focus-visible{ box-shadow: var(--ring-focus), 0 4px 14px rgba(40,30,15,.16) !important; }

  /* ============ Cards & surfaces — paper-soft cream ============ */
  .card{
    background: var(--bn-ivory) !important;
    background-image: none !important;
    border: 1px solid var(--bn-line) !important;
    box-shadow: var(--shadow-soft-sm) !important;
  }

  /* ============ Stat card — editorial, simple ============ */
  .stat, .stat-card{
    background: var(--bn-ivory) !important;
    border: 1px solid var(--bn-line) !important;
    box-shadow: var(--shadow-soft-xs) !important;
    border-radius: 18px !important;
  }
  .stat-num{
    color: var(--bn-charcoal) !important;
    font-weight: 500 !important;
    letter-spacing: -0.02em !important;
  }
  .stat-label{
    color: var(--bn-ink-muted) !important;
    letter-spacing: .14em !important;
    font-weight: 600 !important;
    font-size: 10.5px !important;
  }
  /* Nuke the rainbow per-child colors from polish v4 — single muted accent */
  .grid-stats .stat:nth-child(1) .stat-num,
  .grid-stats .stat:nth-child(2) .stat-num,
  .grid-stats .stat:nth-child(3) .stat-num,
  .grid-stats .stat:nth-child(4) .stat-num{
    color: var(--bn-charcoal) !important;
  }
  /* Subtle gold left-edge bar on hover (matches recipe-tile motif) */
  .stat::before, .stat-card::before{
    background: var(--bn-gold) !important;
  }

  /* ============ Hero card — editorial banner, calm ============ */
  .hero-card{
    background: linear-gradient(180deg, var(--bn-ivory) 0%, var(--bn-cream) 100%) !important;
    background-image: linear-gradient(180deg, var(--bn-ivory) 0%, var(--bn-cream) 100%) !important;
    border: 1px solid var(--bn-line) !important;
    border-radius: 22px !important;
    color: var(--bn-ink) !important;
    box-shadow: var(--shadow-soft-sm) !important;
    overflow: hidden;
  }
  .hero-card::before{
    background: none !important;
    border-top: 3px solid var(--bn-gold) !important;
    width: 56px !important;
    top: 0 !important;
    left: 28px !important;
    height: 0 !important;
    border-radius: 0 !important;
  }
  .hero-card .hero-eyebrow{
    color: var(--bn-gold-deep) !important;
    letter-spacing: .22em !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    font-size: 11px !important;
  }
  .hero-card .hero-eyebrow::before{
    background: var(--bn-gold) !important;
  }
  .hero-card h2{
    color: var(--bn-charcoal) !important;
    font-weight: 500 !important;
  }
  .hero-card h2 .accent{
    color: var(--bn-gold-deep) !important;
    font-style: italic !important;
    font-weight: 500 !important;
    text-shadow: none !important;
    background: none !important;
    -webkit-text-fill-color: var(--bn-gold-deep) !important;
  }
  .hero-card p{
    color: var(--bn-ink-soft) !important;
    opacity: 1 !important;
    font-size: 15.5px !important;
    line-height: 1.65 !important;
  }

  /* ============ Recipe card — editorial tile ============ */
  .recipe-card{
    background: var(--bn-ivory) !important;
    border: 1px solid var(--bn-line) !important;
    box-shadow: var(--shadow-soft-xs) !important;
    border-radius: 18px !important;
  }
  .recipe-card:hover{
    border-color: var(--bn-gold) !important;
    box-shadow: 0 4px 14px -4px rgba(40,30,15,.10), 0 18px 38px -14px rgba(176,138,74,.32) !important;
  }
  .recipe-thumb{
    background: linear-gradient(135deg, var(--bn-clay-soft) 0%, var(--bn-cream) 100%) !important;
  }
  .recipe-title{
    color: var(--bn-charcoal) !important;
    font-size: 18px !important;
    line-height: 1.22 !important;
  }
  .recipe-card:hover .recipe-title{ color: var(--bn-gold-deep) !important; }
  .recipe-meta{ color: var(--bn-ink-muted) !important; letter-spacing: .04em; }
  .recipe-meta-dot{ color: var(--bn-clay) !important; }
  .recipe-body{ background: var(--bn-ivory) !important; }

  /* ============ Page header underline — gold instead of coral ============ */
  .page-head{ border-bottom-color: var(--bn-line) !important; }
  .page-head::after{
    background: var(--bn-gold) !important;
    box-shadow: 0 1px 4px rgba(176,138,74,.30) !important;
    height: 2px !important;
    border-radius: 0 !important;
  }
  .page-title{
    color: var(--bn-charcoal) !important;
    font-weight: 500 !important;
  }

  /* ============ Inputs / search / chips — warm hairline ============ */
  .input, .textarea, .select, input[type="text"], input[type="search"], input[type="email"], input[type="password"]{
    background: var(--bn-ivory) !important;
    border: 1px solid var(--bn-line) !important;
    color: var(--bn-ink) !important;
  }
  .input:focus, .textarea:focus, .select:focus,
  input[type="text"]:focus, input[type="search"]:focus, input[type="email"]:focus, input[type="password"]:focus{
    border-color: var(--bn-gold) !important;
    box-shadow: var(--ring-focus) !important;
    outline: none !important;
  }
  .chip, .tag{
    background: var(--bn-ivory) !important;
    border: 1px solid var(--bn-line) !important;
    color: var(--bn-ink) !important;
  }
  .chip.active, .chip[aria-pressed="true"], .tag.active{
    background: var(--bn-charcoal) !important;
    color: var(--bn-gold) !important;
    border-color: var(--bn-charcoal) !important;
  }

  /* ============ Modals / toasts / scrollbar — warm tint ============ */
  .modal{
    background: var(--bn-ivory) !important;
    border: 1px solid var(--bn-line) !important;
  }
  .modal-title{ color: var(--bn-charcoal) !important; }
  .toast{
    background: var(--bn-charcoal) !important;
    color: var(--bn-gold) !important;
    border: 1px solid rgba(176,138,74,.30) !important;
  }
  ::-webkit-scrollbar-thumb{ background: rgba(176,138,74,.28) !important; background-clip: padding-box !important; }
  ::-webkit-scrollbar-thumb:hover{ background: rgba(176,138,74,.45) !important; background-clip: padding-box !important; }

  /* ============ Links ============ */
  a{ color: var(--bn-charcoal) !important; }
  a:hover{ color: var(--bn-gold-deep) !important; }

  /* ============ Print — keep clean ============ */
  @media print{
    body{ background: #fff !important; }
  }