/* ==========================================================================
   THE BINDER: NEXT CHAPTER — DESIGN TOKENS
   Source of truth: next-chapter-logo.webp (the approved logo, 1254x1254).

   RULE: every colour below was sampled from the logo's own pixels.
   Nothing was invented, blended, lightened or "made similar".
   The comment beside each colour says where in the logo it came from.
   Where a token is a DERIVED measurement (shadow size, component radius),
   it says so.
   ========================================================================== */

:root {
  /* ---------- DEEP GREENS (the B, the door, "Next") ---------- */
  --nc-green-ink: #01140D;   /* "THE BINDER" lettering — near-black green      */
  --nc-green-950: #011A0E;   /* door, darkest shading                          */
  --nc-green-900: #04301B;   /* outer border, dark edge                        */
  --nc-green-800: #033C29;   /* PRIMARY — face of the B, "Next"                */
  --nc-green-700: #0C432C;   /* face of the B, lit side                        */
  --nc-green-hi:  #0C573C;   /* outer border, top highlight                    */
  --nc-green-650: #1F583B;   /* outer border, mid tone                         */

  /* ---------- SECONDARY GREENS (leaves, "Chapter", hills) ---------- */
  --nc-green-600: #326527;   /* "Chapter" lettering, mid                       */
  --nc-green-500: #4A8232;   /* "Chapter" lettering, brightest                 */
  --nc-olive-600: #7B892D;   /* hillside inside the B window                   */
  --nc-olive-500: #8C9534;   /* hill edge inside the B window                  */

  /* ---------- SAGE (inner border ring, door panel) ---------- */
  --nc-sage-600: #486D36;    /* "SORT • PLAN • MOVE FORWARD" lettering         */
  --nc-sage-500: #5E794E;    /* mid sage, door panel / leaves                  */
  --nc-sage-400: #73956D;    /* door inner panel                               */
  --nc-sage-300: #94A486;    /* inner border ring, shaded side                 */
  --nc-sage-200: #C7D4B9;    /* inner border ring, light                       */

  /* ---------- CREAM & WHITE (the tile itself) ---------- */
  --nc-white:      #FEFEFE;  /* the logo's own background — logo ALWAYS sits on this */
  --nc-paper:      #FDFDFB;  /* tile face, centre                              */
  --nc-cream:      #F7F6F2;  /* tile face, toward the edges                    */
  --nc-cream-warm: #F5F0E8;  /* soft ground shadow under the plant             */

  /* ---------- SUNRISE / CHAMPAGNE (light in the doorway) ---------- */
  --nc-peach:    #FEE4C3;    /* sunrise sky                                    */
  --nc-glow-100: #FFECC7;    /* light inside the B window                      */
  --nc-glow-200: #FED89F;    /* light along the path                           */
  --nc-pot:      #F7E3C0;    /* sunlit side of the pot                         */
  --nc-stone:    #AAA69D;    /* shaded side of the pot (warm neutral grey)     */

  /* ---------- GOLD (edge of the B window, divider rules) ---------- */
  --nc-gold-100: #D8C189;    /* gold edge, highlight                           */
  --nc-gold-300: #C6AB63;    /* gold edge, main                                */
  --nc-gold-500: #96814B;    /* divider rules                                  */
  --nc-gold-700: #67532F;    /* divider rules, deepest end                     */

  /* ==========================================================================
     ROLES — how the palette is used. These are aliases, not new colours.
     ========================================================================== */

  /* Text */
  --nc-text:         var(--nc-green-ink);   /* body & headings on cream    17.5:1 */
  --nc-text-heading: var(--nc-green-800);   /* headings, brand green       11.5:1 */
  --nc-text-muted:   var(--nc-sage-600);    /* secondary text               5.5:1 */
  --nc-text-gold:    var(--nc-gold-700);    /* gold-toned text on cream     6.8:1 */
  --nc-text-on-green: var(--nc-paper);      /* text on deep green          12.3:1 */
  --nc-accent-on-green: var(--nc-gold-100); /* gold text on deep green      7.1:1 */

  /* Brand action colours */
  --nc-primary:         var(--nc-green-800);
  --nc-primary-hover:   var(--nc-green-700);
  --nc-primary-pressed: var(--nc-green-900);
  --nc-accent:          var(--nc-gold-300);
  --nc-focus:           var(--nc-gold-300);

  /* Surfaces */
  --nc-surface:      var(--nc-paper);       /* cards, fields                        */
  --nc-surface-logo: var(--nc-white);       /* header/any place the logo appears    */
  --nc-surface-soft: var(--nc-cream);       /* page                                 */
  --nc-surface-warm: var(--nc-cream-warm);  /* alternating section bands            */

  /* Borders */
  --nc-border:        var(--nc-sage-200);   /* card edges, dividers                 */
  --nc-border-field:  var(--nc-sage-400);   /* form fields (3.3:1 vs paper)         */
  --nc-border-strong: var(--nc-green-650);  /* outer border of feature cards        */
  --nc-border-gold:   var(--nc-gold-300);

  /* ==========================================================================
     GRADIENTS — all stops are sampled logo colours
     ========================================================================== */

  /* Buttons/hero: the B face, lit → shade */
  --nc-grad-green: linear-gradient(180deg, #0C432C 0%, #033C29 55%, #04301B 100%);
  /* Big display lettering: measured left→right across "Next Chapter" */
  --nc-grad-wordmark: linear-gradient(90deg, #023620 0%, #195B22 30%, #326527 45%, #275625 60%, #153D24 75%, #032A1A 100%);
  /* Gold edge of the B window */
  --nc-grad-gold: linear-gradient(180deg, #D8C189 0%, #C6AB63 55%, #96814B 100%);
  /* Sunrise glow (doorway light) */
  --nc-grad-sunrise: linear-gradient(180deg, #FEE4C3 0%, #FFECC7 45%, #FED89F 100%);
  /* Fading gold divider rule under the wordmark */
  --nc-grad-rule: linear-gradient(90deg, rgba(150,129,75,0) 0%, #96814B 22%, #96814B 78%, rgba(150,129,75,0) 100%);
  /* Page background: the tile's centre-to-edge vignette */
  --nc-bg-page: radial-gradient(120% 80% at 50% 0%, #FDFDFB 0%, #F7F6F2 70%);

  /* ==========================================================================
     SHAPE
     ========================================================================== */

  /* MEASURED: the logo tile's corner is a circle of radius ≈ 22% of tile width
     (247px on a 1129px tile). */
  --nc-radius-tile: 22%;
  /* DERIVED: the same soft, generous character, scaled down for components. */
  --nc-radius-xl: 24px;      /* modals, hero cards        */
  --nc-radius-lg: 18px;      /* cards                     */
  --nc-radius-md: 14px;      /* buttons, fields           */
  --nc-radius-sm: 10px;      /* chips, small controls     */
  --nc-radius-pill: 999px;   /* badges, progress bars     */

  /* MEASURED: the logo's border is DOUBLE — dark green outer line, then a
     sage ring of the same width just inside it. Reused as the "feature card". */
  --nc-line-outer: 1.5px;
  --nc-line-inner: 3px;

  /* ==========================================================================
     SHADOW
     MEASURED on the logo: neutral grey (not tinted), falls to the bottom-right
     only, ~39% strength at the edge fading out over ~3.5% of the tile width;
     nothing appears on the top or left.
     DERIVED: the same direction and softness, scaled for smaller surfaces.
     ========================================================================== */
  --nc-shadow-tile:   8px 10px 26px rgba(0, 0, 0, 0.36);
  --nc-shadow-raised: 4px 6px 16px rgba(0, 0, 0, 0.30);
  --nc-shadow-card:   3px 4px 12px rgba(0, 0, 0, 0.24);
  --nc-shadow-btn:    2px 3px 6px rgba(0, 0, 0, 0.30);
  --nc-ring-focus:    0 0 0 3px var(--nc-paper), 0 0 0 5px var(--nc-gold-300);

  /* ==========================================================================
     CATEGORY COLOURS (My Stuff) — each pairing checked for reading contrast
     ========================================================================== */
  --nc-keep-bg:    var(--nc-green-800);  --nc-keep-fg:    var(--nc-paper);      /* 12.3:1 */
  --nc-family-bg:  var(--nc-green-500);  --nc-family-fg:  var(--nc-paper);      /*  4.6:1 */
  --nc-sell-bg:    var(--nc-gold-300);   --nc-sell-fg:    var(--nc-green-ink);  /*  8.5:1 */
  --nc-donate-bg:  var(--nc-sage-400);   --nc-donate-fg:  var(--nc-green-ink);  /*  5.6:1 */
  --nc-trash-bg:   var(--nc-stone);      --nc-trash-fg:   var(--nc-green-ink);  /*  7.8:1 */
  --nc-unsure-bg:  var(--nc-peach);      --nc-unsure-fg:  var(--nc-gold-700);   /*  6.0:1 */
  --nc-unsure-edge: var(--nc-gold-300);

  /* ==========================================================================
     TYPOGRAPHY
     Chosen by rendering candidates beside the logo's own lettering.
     "Next Chapter" in the logo is a high-contrast serif with ball terminals:
       -> Playfair Display (closest widely-available match at readable sizes).
     "THE BINDER" / tagline are wide-tracked geometric sans capitals:
       -> Montserrat.
     ========================================================================== */
  --nc-font-display: 'Playfair Display', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --nc-font-body:    'Montserrat', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --nc-fs-display: 34px;     /* hero numbers / page title  */
  --nc-fs-h1: 28px;
  --nc-fs-h2: 22px;
  --nc-fs-h3: 17px;
  --nc-fs-body: 15px;
  --nc-fs-small: 13px;
  --nc-fs-micro: 11.5px;     /* tracked caps labels        */

  --nc-track-display: -0.02em;  /* the logo's lettering is tightly set */
  --nc-track-caps: 0.22em;      /* "THE BINDER" style tracked capitals */
  --nc-track-btn: 0.03em;

  /* ==========================================================================
     SPACING (4px scale) — compact by design: no wasted space, no scrolling
     ========================================================================== */
  --nc-space-1: 4px;
  --nc-space-2: 8px;
  --nc-space-3: 12px;
  --nc-space-4: 16px;
  --nc-space-5: 24px;
  --nc-space-6: 32px;
  --nc-tap: 44px;            /* minimum touch target */
}