/* ============================================================
   Niu Creative — Color tokens
   "Cool, teal-leaning green system. Jade Black anchors everything,
    the green ladder builds depth, Mint is the single bright pop."

   Structural signature (adopted from the banded reference system):
   the page advances as a sequence of full-bleed BANDS that alternate
   DARK (jade) and LIGHT (canvas). Depth is flat color-block, not shadow.
   ============================================================ */

:root {
  /* ---- Primary · Jade green ladder ---- */
  --jade-black: #08201C;   /* Primary dark band & ink    */
  --deep-jade:  #0F3A33;   /* Dark surfaces / blocks     */
  --jade:       #18564C;   /* Borders, hover             */
  --viridian:   #258F77;   /* Mid-tone support           */
  --mint:       #34E6B0;   /* Accent — the single pop    */

  /* ---- Secondary · light ---- */
  --white:      #FFFFFF;   /* Body on dark; crisp blocks  */
  --canvas:     #F2F6F4;   /* Default LIGHT band bg       */
  --canvas-cream: #FBFBF5; /* Warm off-white — transactional canvas (Shopify-derived) */
  --surface-soft: #E6EEEA; /* Soft secondary light block  */
  --frost:      #EAF2EF;   /* Legacy alias of soft light  */

  /* ---- Extended green ladder (derived, for depth & states) ---- */
  --jade-950: #061A16;
  --jade-900: #08201C;
  --jade-800: #0F3A33;
  --jade-700: #18564C;
  --jade-600: #1E7263;
  --jade-500: #258F77;
  --jade-400: #34E6B0;
  --jade-300: #6BEEC8;
  --jade-200: #A3F4DC;
  --jade-100: #D6FBEF;

  /* ---- Mint state ramp ---- */
  --mint-hover:   #4BEBBB;
  --mint-press:   #28C497;
  --mint-soft:    rgba(52, 230, 176, 0.14);
  --mint-line:    rgba(52, 230, 176, 0.32);

  /* ---- Band system — the page's pacing device ---- */
  --band-dark:  var(--jade-black);
  --band-light: var(--canvas);

  /* ---- Two-track canvas (Shopify-structure) ----
     A page commits to ONE track. Cinematic = near-black jade canvas,
     full-bleed photography, thin display. Transactional = cream/white
     canvas, jade ink, filled + mint pills. Bands may still alternate
     WITHIN a track, but the track sets the dominant polarity.
     The --canvas-* / --track-* names are aliases of the same values. */
  --canvas-night:          var(--jade-black);  /* cinematic canvas        */
  --canvas-void:           #061410;            /* near-black page behind panels */
  --canvas-night-elevated: #0C2823;            /* cards on cinematic      */
  --canvas-light:          var(--white);       /* crisp transactional card */
  --track-cinematic:    var(--jade-black);  /* dark marketing canvas   */
  --track-cinematic-elevated: #0C2823;      /* cards on cinematic      */
  --track-transactional: var(--canvas-cream);/* light product canvas   */

  /* ---- Caption-card tints (flat color blocks, square) ---- */
  --tint-mint: var(--mint);       /* on-tint text = jade-black */
  --tint-deep: #143F37;           /* on-tint text = white      */
  --tint-soft: var(--surface-soft);/* on-tint text = jade-black */

  /* ---- Semantic · surfaces (flat blocks, square corners) ---- */
  --surface-base:    var(--jade-black);  /* dark band background    */
  --surface-sunken:  var(--jade-950);    /* wells, input fills      */
  --surface-card:    var(--deep-jade);   /* dark block / card       */
  --surface-raised:  #143F37;            /* dark block hover        */
  --surface-light:   var(--white);       /* white block             */
  --surface-canvas:  var(--canvas);      /* light band background   */
  --surface-frost:   var(--surface-soft);/* soft light block        */

  /* ---- Semantic · text on DARK ---- */
  --text-strong:    var(--white);
  --text-body:      rgba(255, 255, 255, 0.86);
  --text-muted:     rgba(255, 255, 255, 0.60);
  --text-faint:     rgba(255, 255, 255, 0.40);
  --text-accent:    var(--mint);
  --text-on-mint:   var(--jade-black);
  --on-ink-muted:   #AAB5AD;             /* footer/secondary on dark */
  --link-cool-1:    #AAB5AD;             /* muted cool link on dark  */
  --link-cool-2:    #9AA8A2;             /* dimmer cool link on dark */

  /* ---- Semantic · text on LIGHT ---- */
  --text-on-light:  var(--jade-black);
  --text-on-light-muted: #5B6660;        /* body/eyebrow on light   */
  --ink-muted:      #5B6660;             /* alias of on-light-muted */

  /* ---- Semantic · borders / hairlines ---- */
  --border-subtle:  rgba(255, 255, 255, 0.10);  /* hairline on dark  */
  --border-default: var(--jade);
  --border-strong:  var(--viridian);
  --hairline-light: #DCE4DF;                     /* hairline on light */
  --border-on-light: rgba(8, 32, 28, 0.14);
  --focus-ring:     var(--mint);

  /* ---- Status (kept teal-adjacent to stay on-brand) ---- */
  --success: #34E6B0;
  --warning: #F2C94C;
  --danger:  #FF6B6B;
  --info:    #5BC0DE;
}