/* ==========================================================================
   Colour tokens: the single source of truth for every colour on the site.

   Three layers:
     1. Primitives: fixed brand values (the www.deepen.ai palette: ink, paper,
        sky, accent blues). Never change between themes. Each has an RGB-channel
        twin so any opacity can be derived:
          rgb(var(--rgb-indigo) / .1)
     2. Semantic tokens: what components use (--surface, --text-muted,
        --accent ...). Light only, as on www.deepen.ai: there is no dark theme.
     3. Legacy aliases (--navy, --indigo, --bg-lavender ...) live in site.css
        and point at layer 2, so older rules keep working while they migrate.

   Rules for choosing a token:
     - Text/headings: --heading, --text, --text-muted, --text-faint
     - Card/panel backgrounds: --surface (never #fff)
     - Soft coloured backgrounds (badges, icon tiles): --tint-*
     - One-off opacity of a brand colour: rgb(var(--rgb-*) / a)
   ========================================================================== */

/* ---- 1. Primitives (theme-independent) ---- */
:root{
  --navy-950:   #0a1130;   /* deepen ink / navy */
  --navy-900:   #141c42;   /* deepen ink-2 */
  --navy-800:   #0e1638;   /* deepen navy-2 */
  --navy-1000:  #060a22;   /* deepen navy-3 (footer) */
  --ink-muted:  #3b4670;
  --paper:      #f3f5fb;
  --paper-2:    #e6ecf8;
  --ivory:      #fbfcfe;
  --sky-1:      #dde6f7;
  --sky-2:      #c7d4f0;
  --indigo-300: #8ca0ff;   /* deepen accent-3 */
  --indigo-400: #5a6de6;   /* deepen accent-2 */
  --indigo-500: #3b52e0;
  --indigo-600: #2233b7;   /* deepen accent */
  --indigo-700: #1a2790;
  --green-700:  #1e7a4a;   /* success state only, never brand */
  /* Semantic warning only (a real warning state shown to the user), never a brand accent. */
  --amber-600:  #c9741a;
  --red-600:    #c43a3a;
  --white:      #ffffff;

  --rgb-navy:   10 17 48;
  --rgb-indigo: 34 51 183;
  --rgb-accent-2: 90 109 230;   /* deepen accent-2 #5a6de6 */
  --rgb-amber:  201 116 26;
  --rgb-red:    196 58 58;
  --rgb-white:  255 255 255;
  --rgb-black:  0 0 0;

  --ease: cubic-bezier(.2,.7,.2,1);
}

/* ---- 2. Semantic tokens (light only) ---- */
:root{
  color-scheme: light;

  /* Page */
  --bg:             #f3f5fb;   /* deepen paper */
  --bg-soft:        #edf1f9;
  --bg-subtle:      #e6ecf8;   /* deepen paper-2 */
  --bg-wash:        #edf1f9;
  --bg-hero:        #f3f5fb;

  /* Surfaces */
  --surface:        #ffffff;
  --surface-raised: #ffffff;
  --surface-sunken: #f3f5fb;
  --surface-glass:  rgb(var(--rgb-white) / .8);

  /* Text */
  --heading:        #0a1130;   /* deepen ink */
  --text:           #0a1130;
  --text-muted:     #3b4670;   /* deepen ink-muted */
  --text-faint:     #5b6488;
  --text-on-accent: #ffffff;

  /* Decorative section glows scale by --wash-k; header/divider lines get their own tokens. */
  --wash-k:         .4;
  --line-header:    var(--border);
  --line-divider:   var(--border);
  --band-edge:      var(--border-soft);
  --hero-dot:       10%;

  /* Borders */
  /* deepen hairline = ink at 10%; inputs a little stronger */
  --border:         rgb(var(--rgb-navy) / .12);
  --border-soft:    rgb(var(--rgb-navy) / .08);
  --border-strong:  rgb(var(--rgb-navy) / .18);
  --border-hover:   rgb(var(--rgb-navy) / .28);

  /* Accents */
  --accent:         var(--indigo-600);
  --accent-hover:   var(--indigo-700);
  --accent-2:       var(--indigo-400);   /* deepen accent-2 */
  --accent-2-hover: var(--indigo-600);
  --accent-2-text:  var(--indigo-600);   /* text on an accent-2 tint */
  --warn:           var(--amber-600);
  --danger:         var(--red-600);
  --danger-text:    #a53131;
  --success-text:   var(--green-700);

  /* Tints: soft coloured fills for badges, icon tiles, callouts */
  --tint-accent:    rgb(var(--rgb-indigo) / .10);
  --accent-soft:    #2233b71f;   /* deepen accent-soft */
  --tint-accent-2:  rgb(var(--rgb-accent-2) / .13);
  --tint-warn:      rgb(var(--rgb-amber) / .12);
  --tint-neutral:   rgb(var(--rgb-navy) / .08);
  --tint-danger:    rgb(var(--rgb-red) / .09);

  /* Inverse bands (navy CTA band, skip link) */
  --band-bg:         #0a1130;   /* deepen navy */
  --band-text:       #eef2fb;   /* deepen navy-fg */
  --band-text-muted: #8892b4;   /* deepen navy-muted */
  --band-border:     transparent;

  /* Code panels (always dark) */
  --code-bg:      #060a22;
  --code-text:    #d6dafb;
  --code-comment: #8892b4;
  --code-accent:  #8ca0ff;

  /* Effects. --rgb-shadow tints every shadow navy */
  --rgb-shadow:  var(--rgb-navy);
  --shadow-xs:   0 1px 2px rgb(var(--rgb-navy) / .08), 0 0 0 1px rgb(var(--rgb-navy) / .04);
  --shadow-card: 0 1px 2px rgb(var(--rgb-navy) / .06), 0 4px 10px -2px rgb(var(--rgb-navy) / .07), 0 18px 36px -16px rgb(var(--rgb-navy) / .22);
  --shadow-pop:  0 2px 4px rgb(var(--rgb-navy) / .07), 0 12px 24px -8px rgb(var(--rgb-navy) / .14), 0 32px 64px -24px rgb(var(--rgb-navy) / .30);
  --ring:        0 0 0 4px rgb(var(--rgb-indigo) / .16);
  --grad-brand:  linear-gradient(120deg, var(--accent) 0%, var(--indigo-400) 100%);
  --glow-accent:   rgb(var(--rgb-indigo) / .06);
  --glow-accent-2: rgb(var(--rgb-accent-2) / .05);
  --selection:     rgb(var(--rgb-indigo) / .16);

  /* Diagrams (inline SVG) */
  --viz-accent:   #2233b7;
  --viz-accent-2: #5a6de6;
  --viz-accent-3: #8ca0ff;   /* deepen accent-3 */
  --viz-error:    #c43a3a;   /* the one drawn error state: a miscalibrated ray */
  --viz-ink:      #0a1130;
  --viz-label:    #3b4670;
  --viz-muted:    #8489a8;
  --viz-line:     #aab0d6;
  --viz-grid:     #d6d9ea;
  --viz-panel:    #f3f5fb;

  /* Components */
  --band-heading:         #ffffff;
  --highlight:            rgb(var(--rgb-white) / .6);   /* 1px inset top light on glass/cards */
  /* deepen.ai buttons are flat accent blue; the call to action uses the same button. */
  --btn-primary-bg:       var(--indigo-600);
  --btn-primary-bg-hover: var(--indigo-700);
  --btn-primary-border:   var(--indigo-600);
  --btn-cta-bg:           var(--indigo-600);
  --btn-cta-bg-hover:     var(--indigo-700);
  --btn-cta-border:       var(--indigo-600);
}