/* ============================================================
   HOUSE OF CHICORY — COLOR SYSTEM
   ------------------------------------------------------------
   The palette is drawn directly from the chicory plant and its
   processing, so the brand is rooted in the product itself:

   • Botanical Green  — the chicory leaf. Our PRIMARY brand color.
                        Signals nature, food science, sustainability,
                        trust and quiet authority. Deep enough to read
                        as premium, never "eco-cliché" bright green.
   • Roasted Amber    — the roasted chicory root. SECONDARY / warmth.
                        Evokes the product, coffee adjacency, craft.
   • Petal Blue       — the chicory flower (cornflower blue). ACCENT,
                        used sparingly for innovation / highlights.
   • Antique Gold     — the emblem's ornamental ring. The heritage
                        PREMIUM METAL: fine rules, dividers, accents.
   • Warm Stone/Bone  — paper, root flesh, raw material. NEUTRALS.
                        Gives the editorial, Aesop-like calm.

   Everything is warm-biased (no cold grays) so the system feels
   crafted and human rather than corporate-sterile.
   ============================================================ */

:root {
  /* ---- Botanical Green (PRIMARY) ---- */
  --green-50:  #ECF3EF;
  --green-100: #CFE2D9;
  --green-200: #A6C7B7;
  --green-300: #74A48E;
  --green-400: #46806A;
  --green-500: #2A6450;
  --green-600: #1F5642;
  --green-700: #1B4D3E;   /* brand primary */
  --green-800: #143A2E;
  --green-900: #0F3429;

  /* ---- Roasted Amber (SECONDARY) ---- */
  --amber-50:  #FBF3EB;
  --amber-100: #F0DBC4;
  --amber-200: #E0B98C;
  --amber-300: #CB9050;
  --amber-400: #A8632C;   /* secondary */
  --amber-500: #8E5325;
  --amber-600: #7E4A20;
  --amber-700: #5E3717;
  --amber-800: #543114;

  /* ---- Antique Gold / Brass ----
     The ornamental ring of the brand emblem. The signature
     PREMIUM METAL: heritage, craft, luxury. Used for fine rules,
     dividers, the wordmark eyebrow, and restrained accents.
     Never as a large fill — gold is a line, not a field. */
  --gold-50:  #FAF4E4;
  --gold-100: #F0E3C0;
  --gold-200: #E1CC92;
  --gold-300: #CDB066;
  --gold-400: #B89441;   /* the ring */
  --gold-500: #A07F34;
  --gold-600: #8A6E2C;
  --gold-700: #6B541F;

  /* ---- Petal Blue (ACCENT) ---- */
  --blue-50:  #EEF0F8;
  --blue-100: #D8DCEF;
  --blue-200: #B6BEE0;
  --blue-300: #8E99CC;
  --blue-400: #6E7FB8;   /* accent */
  --blue-500: #5C6FB1;
  --blue-600: #4F5E97;
  --blue-700: #3C496F;
  --blue-800: #36406B;

  /* ---- Warm Neutrals (Stone / Bone) ---- */
  --stone-50:  #FBF9F4;  /* paper */
  --stone-100: #F6F2EA;  /* bone — page background */
  --stone-150: #ECE5D8;  /* sand */
  --stone-200: #E3DACB;
  --stone-300: #CFC4B2;
  --stone-400: #B0A48E;
  --stone-500: #8E8169;
  --stone-600: #6B6150;
  --stone-700: #4C4538;
  --stone-800: #322D24;
  --stone-900: #211C15;  /* ink */
  --stone-950: #17130E;

  /* ---- Pure-ish anchors ---- */
  --white: #FFFFFF;
  --black: #100D09;

  /* ===========================================================
     SEMANTIC ALIASES — reference these in product code,
     never the raw scale above.
     =========================================================== */

  /* Brand */
  --brand-primary:        var(--green-700);
  --brand-primary-strong: var(--green-900);
  --brand-primary-soft:   var(--green-50);
  --brand-secondary:      var(--amber-400);
  --brand-accent:         var(--blue-400);
  --brand-gold:           var(--gold-400);  /* heritage metal accent */
  --brand-gold-soft:      var(--gold-50);
  --rule-gold:            var(--gold-300);   /* fine ornamental divider */

  /* Text */
  --text-strong:  var(--stone-900);   /* headings */
  --text-body:    var(--stone-800);   /* body copy */
  --text-muted:   var(--stone-600);   /* captions, meta */
  --text-subtle:  var(--stone-500);   /* placeholder, disabled label */
  --text-inverse: var(--stone-50);    /* on dark / brand surfaces */
  --text-on-brand:var(--stone-50);
  --text-link:    var(--green-700);

  /* Backgrounds */
  --bg-page:      var(--stone-100);
  --bg-page-alt:  var(--stone-150);   /* alternating section */
  --bg-inverse:   var(--green-900);   /* dark brand section */

  /* Surfaces */
  --surface-card:     var(--stone-50);
  --surface-raised:   var(--white);
  --surface-sunken:   var(--stone-150);
  --surface-brand:    var(--green-700);
  --surface-glass:    rgba(251, 249, 244, 0.72);

  /* Borders / dividers */
  --border-subtle:  rgba(33, 28, 21, 0.08);
  --border-default: rgba(33, 28, 21, 0.14);
  --border-strong:  rgba(33, 28, 21, 0.26);
  --border-brand:   var(--green-700);
  --border-focus:   var(--blue-400);

  /* States — feedback (kept warm to sit in palette) */
  --success:      #2E6B4F;
  --success-soft: #E2EFE8;
  --success-text: #18402F;
  --warning:      #B7791F;
  --warning-soft: #F7EAD0;
  --warning-text: #5C3D0C;
  --error:        #B23A2C;
  --error-soft:   #F6E0DB;
  --error-text:   #5E1C14;
  --info:         var(--blue-600);
  --info-soft:    var(--blue-50);
  --info-text:    var(--blue-800);

  /* Interaction states */
  --hover-tint:    rgba(33, 28, 21, 0.04);  /* overlay on neutral hover */
  --hover-darken:  rgba(16, 13, 9, 0.10);   /* overlay to darken brand */
  --press-darken:  rgba(16, 13, 9, 0.16);
  --focus-ring:    rgba(110, 127, 184, 0.45);

  --selection-bg: var(--amber-100);
}

/* ===========================================================
   DARK MODE — for dark brand sections & opt-in dark UI.
   Apply via [data-theme="dark"] on a container or <html>.
   =========================================================== */
[data-theme="dark"] {
  --brand-primary:        var(--green-300);
  --brand-primary-strong: var(--green-200);
  --brand-primary-soft:   rgba(116, 164, 142, 0.16);
  --brand-secondary:      var(--amber-300);
  --brand-accent:         var(--blue-300);
  --brand-gold:           var(--gold-300);
  --rule-gold:            var(--gold-500);

  --text-strong:  #F3EEE4;
  --text-body:    #E4DCCF;
  --text-muted:   #B6AC9B;
  --text-subtle:  #8E8169;
  --text-inverse: var(--stone-900);
  --text-on-brand:#F3EEE4;
  --text-link:    var(--green-300);

  --bg-page:      #161310;
  --bg-page-alt:  #1C1814;
  --bg-inverse:   #0C0A08;

  --surface-card:   #211C17;
  --surface-raised: #2C261F;
  --surface-sunken: #161310;
  --surface-brand:  var(--green-800);
  --surface-glass:  rgba(33, 28, 23, 0.66);

  --border-subtle:  rgba(255, 255, 255, 0.07);
  --border-default: rgba(255, 255, 255, 0.13);
  --border-strong:  rgba(255, 255, 255, 0.24);

  --success-soft: rgba(46, 107, 79, 0.22);
  --warning-soft: rgba(183, 121, 31, 0.22);
  --error-soft:   rgba(178, 58, 44, 0.22);
  --info-soft:    rgba(92, 111, 177, 0.22);

  --hover-tint:   rgba(255, 255, 255, 0.06);
  --selection-bg: rgba(168, 99, 44, 0.4);
}

::selection { background: var(--selection-bg); }