/* TheAi.Biz — design tokens.
   Identity: Graphite & Ember. Graphite ink on warm alabaster, one ember copper
   accent, deep teal reserved for data and working states. Light is the whole
   identity; the dark bands are a deliberate second palette, not an inversion. */

:root {
  /* ---- Surfaces ---- */
  --paper:        #FAF8F5;   /* warm alabaster — the page */
  --paper-raised: #FFFFFF;   /* cards, mock interfaces */
  --paper-sunk:   #F2EEE8;   /* recessed bands, inputs, wells */
  --paper-edge:   #FEFDFC;   /* top highlight on raised chrome */

  --line:         #E6E0D8;
  --line-strong:  #D2C9BD;

  /* ---- Ink ---- */
  --ink:       #17171A;   /* graphite */
  --ink-soft:  #55555E;
  /* #86828B read as 3.3:1 on --paper-sunk. Tertiary text still has to be
     legible, so the faint tone is pinned to >=4.5:1 on the darkest light
     surface rather than to a nice-looking grey. */
  --ink-faint: #6D6A73;

  /* ---- Ember: the accent. Fills, borders, icons, large display text. ---- */
  --accent:        #C2571E;
  --accent-hot:    #D9702F;   /* hover / gradient top */
  --accent-deep:   #A2481A;   /* pressed / gradient bottom */
  --accent-strong: #8F3F14;   /* small accent TEXT only — 4.5:1 on paper */
  --accent-tint:   #FBEDE3;
  --accent-tint-2: #F6DECD;
  --accent-ink:    #FFFFFF;
  --btn-top:       #B85219;
  --btn-bottom:    #9E4416;
  --btn-hover:     #8F3F14;

  /* ---- Deep teal: data, charts, "working" status. ---- */
  --data:        #0E5C56;
  --data-strong: #0A4842;
  --data-tint:   #E2EFEC;
  --data-ink:    #FFFFFF;

  /* ---- Semantics ---- */
  --positive:      #146B4A;
  --positive-tint: #E3F0E9;
  --caution:       #8C5A0E;
  --caution-tint:  #FAF0DC;

  /* ---- Elevation. Warm shadows — a neutral grey shadow reads cheap here. --- */
  --shadow-xs:   0 1px 2px rgba(38, 26, 18, .05);
  --shadow-soft: 0 1px 2px rgba(38, 26, 18, .04), 0 8px 22px -12px rgba(38, 26, 18, .16);
  --shadow-card: 0 1px 2px rgba(38, 26, 18, .04), 0 14px 34px -20px rgba(38, 26, 18, .24);
  --shadow-pop:  0 2px 6px rgba(38, 26, 18, .07), 0 28px 56px -26px rgba(38, 26, 18, .32);
  --shadow-lift: 0 3px 8px rgba(38, 26, 18, .07), 0 34px 64px -28px rgba(38, 26, 18, .34);
  --glow-ember:  0 0 0 1px rgba(194, 87, 30, .16), 0 18px 44px -22px rgba(194, 87, 30, .42);

  /* ---- Type ---- */
  --font-display: 'Bricolage Grotesque', 'Avenir Next', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-text:    'Inter Tight', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  --step-display: clamp(2.625rem, 1.55rem + 4.6vw, 4.5rem);
  --step-h2:      clamp(1.875rem, 1.28rem + 2.5vw, 3rem);
  --step-h3:      clamp(1.25rem, 1.06rem + 0.8vw, 1.625rem);
  --step-h4:      clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --step-lede:    clamp(1.0625rem, 0.98rem + 0.5vw, 1.3125rem);
  --step-body:    1rem;
  --step-sm:      0.9375rem;
  --step-xs:      0.875rem;
  --step-micro:   0.8125rem;   /* floor — nothing smaller carries meaning */

  --tracking-display: -0.033em;
  --tracking-h2:      -0.026em;
  --tracking-label:    0.1em;

  /* ---- Space ---- */
  --gutter:     clamp(20px, 5vw, 44px);
  --band-y:     clamp(72px, 10vw, 136px);
  --band-y-sm:  clamp(52px, 7vw, 92px);
  --measure:    1200px;
  --measure-md: 1000px;
  --measure-sm: 760px;

  /* ---- Shape ---- */
  --radius-xs: 6px;
  --radius:    10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* ---- Motion ---- */
  --ease:     cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --t-fast:   .16s;
  --t-base:   .26s;
  --t-slow:   .5s;

  --focus-ring: 0 0 0 2px var(--paper), 0 0 0 4px var(--accent);
}

/* ---- Dark bands. Scoped, not a media query: these two sections are art
   direction. Every token a component reads is redefined here, so any card
   dropped inside a dark band renders correctly without special-casing. ---- */

.band-dark {
  --paper:        #121316;
  --paper-raised: #1B1D21;
  --paper-sunk:   #0D0E11;
  --paper-edge:   #24272C;

  --line:        #2A2D33;
  --line-strong: #3B3F47;

  --ink:       #F3F1EE;
  --ink-soft:  #ADAAB3;
  --ink-faint: #8A888F;

  --accent:        #E8823F;
  --accent-hot:    #F2955A;
  --accent-deep:   #C2571E;
  --accent-strong: #F0A272;   /* accent text on near-black */
  --accent-tint:   #2A1B12;
  --accent-tint-2: #3A2517;
  --accent-ink:    #17110C;
  --btn-top:       #F2955A;
  --btn-bottom:    #E8823F;
  --btn-hover:     #F2955A;

  --data:        #5FBFAF;
  --data-strong: #86D4C6;
  --data-tint:   #12241F;
  --data-ink:    #06201B;

  --positive:      #5FBE8C;
  --positive-tint: #10251A;
  --caution:       #DDA657;
  --caution-tint:  #2A2013;

  --shadow-xs:   0 1px 2px rgba(0, 0, 0, .5);
  --shadow-soft: 0 1px 2px rgba(0, 0, 0, .5), 0 8px 22px -12px rgba(0, 0, 0, .8);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, .5), 0 14px 34px -20px rgba(0, 0, 0, .9);
  --shadow-pop:  0 2px 6px rgba(0, 0, 0, .6), 0 28px 56px -26px rgba(0, 0, 0, .9);
  --shadow-lift: 0 3px 8px rgba(0, 0, 0, .6), 0 34px 64px -28px rgba(0, 0, 0, .95);
  --glow-ember:  0 0 0 1px rgba(232, 130, 63, .2), 0 18px 44px -22px rgba(232, 130, 63, .3);

  --focus-ring: 0 0 0 2px var(--paper), 0 0 0 4px var(--accent);

  background: var(--paper);
  color: var(--ink);
}