/* ============================================================
   QUAY DESIGN SYSTEM — Colors & Type
   Kraken-inspired: clean white, Kraken Purple, cool neutrals.
   IBM Plex Sans (fallback for Kraken-Brand / Kraken-Product).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  /* ---------- CORE PALETTE ----------
     White surfaces, cool neutrals, Kraken Purple as brand. */

  /* Surfaces — white-first, cool-toned hover washes */
  --surface-bone:     #FFFFFF;   /* page background */
  --surface-canvas:   #FFFFFF;   /* card / panel surface */
  --surface-paper:    #FFFFFF;   /* pure white */
  --surface-sand:     #F4F4F7;   /* secondary panel / hover wash */
  --surface-clay:     #DEDEE5;   /* dividers when sand isn't strong enough */
  --surface-ink:      #101114;   /* dark inverted surface (footer, dark hero) */
  --surface-ink-2:    #1A1B1F;

  /* Ink (text) — near-black with cool-blue undertone */
  --ink-1:            #101114;   /* primary text */
  --ink-2:            #484B5E;   /* secondary text */
  --ink-3:            #686B82;   /* tertiary / muted */
  --ink-4:            #9497A9;   /* placeholder / disabled */
  --ink-on-dark:      #FFFFFF;
  --ink-on-dark-2:    #9497A9;

  /* Borders — cool gray hairlines */
  --border-soft:      rgba(16, 17, 20, 0.06);
  --border-default:   #DEDEE5;
  --border-strong:    #C7C7D1;
  --border-focus:     #7132F5;

  /* ---------- BRAND ----------
     Kraken Purple. 500 is primary CTA, 600/700 are press states & deep accents. */
  --ember-50:         #F4EFFE;
  --ember-100:        #E8DFFD;
  --ember-200:        #D2BFFC;
  --ember-300:        #B193FA;
  --ember-400:        #8E5DF8;
  --ember-500:        #7132F5;   /* PRIMARY · Kraken Purple */
  --ember-600:        #5741D8;   /* button border / outlined */
  --ember-700:        #5B1ECF;   /* deepest purple */
  --ember-800:        #4313A4;
  --ember-900:        #2C0875;

  /* Brass → soft secondary neutral for chart accents (no warm gold in the new system) */
  --brass-100:        #E8E9EE;
  --brass-300:        #C7C8D1;
  --brass-500:        #9497A9;
  --brass-700:        #686B82;

  /* ---------- SEMANTIC ---------- */
  --gain-bg:          rgba(20, 158, 97, 0.16);
  --gain-fg:          #026B3F;
  --gain-500:         #149E61;
  --gain-strong:      #026B3F;

  --loss-bg:          rgba(216, 60, 64, 0.12);
  --loss-fg:          #A8232A;
  --loss-500:         #D83C40;
  --loss-strong:      #8B1C22;

  --warn-bg:          rgba(212, 145, 12, 0.14);
  --warn-fg:          #7A5400;
  --warn-500:         #D4910C;

  --info-bg:          rgba(113, 50, 245, 0.10);
  --info-fg:          #5741D8;
  --info-500:         #7132F5;

  /* ---------- TYPOGRAPHY ----------
     Kraken-Brand for display, Kraken-Product for UI.
     IBM Plex Sans is the closest free fallback for both. */
  --font-display:     'Kraken-Brand', 'IBM Plex Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-ui:          'Kraken-Product', 'IBM Plex Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono:        'IBM Plex Mono', 'SF Mono', Menlo, monospace;

  /* Type scale — matches Kraken's hierarchy table */
  --t-display-xl:     clamp(52px, 6.5vw, 80px);
  --t-display-l:      48px;   /* Display Hero */
  --t-display-m:      36px;   /* Section heading */
  --t-display-s:      28px;   /* Sub-heading */
  --t-h1:             24px;
  --t-h2:             22px;   /* Feature title */
  --t-h3:             18px;
  --t-body-l:         18px;
  --t-body:           16px;
  --t-body-s:         14px;
  --t-caption:        14px;
  --t-micro:          12px;

  /* Line heights */
  --lh-tight:         1.17;   /* display hero */
  --lh-snug:          1.22;   /* section heading */
  --lh-normal:        1.29;   /* sub-heading */
  --lh-loose:         1.38;   /* body */
  --lh-caption:       1.43;

  /* Letter spacing */
  --ls-display:       -1px;       /* Display Hero @ 48 */
  --ls-display-tight: -1.2px;     /* tighter for very large */
  --ls-display-s:     -0.5px;     /* Section / sub-heading */
  --ls-ui:            0;
  --ls-micro:         0.06em;

  /* ---------- SPACING ----------
     Kraken's actual ramp: 2/4/8/12/16/20/24/32/40/48/64/80/120 */
  --s-1:  2px;
  --s-2:  4px;
  --s-3:  6px;
  --s-4:  8px;
  --s-5:  12px;
  --s-6:  16px;
  --s-7:  20px;
  --s-8:  24px;
  --s-9:  32px;
  --s-10: 40px;
  --s-11: 48px;
  --s-12: 64px;
  --s-13: 80px;
  --s-14: 120px;

  /* ---------- RADII ---------- */
  --r-xs:    3px;
  --r-sm:    6px;
  --r-md:    8px;
  --r-lg:    10px;
  --r-button:12px;   /* explicit button radius — Kraken's hard cap */
  --r-xl:    12px;   /* cards */
  --r-2xl:   16px;   /* hero panels */
  --r-pill:  9999px; /* only chips / tags — NEVER buttons */
  --r-circle:50%;

  /* ---------- ELEVATION ---------- */
  --shadow-whisper:  0 1px 4px rgba(16, 24, 40, 0.04);
  --shadow-soft:     0 4px 24px rgba(0, 0, 0, 0.03);
  --shadow-card:     0 4px 24px rgba(0, 0, 0, 0.03), 0 1px 4px rgba(16, 24, 40, 0.04);
  --shadow-lifted:   0 12px 32px rgba(16, 24, 40, 0.08), 0 2px 6px rgba(16, 24, 40, 0.04);
  --shadow-modal:    0 24px 64px rgba(16, 24, 40, 0.18), 0 4px 12px rgba(16, 24, 40, 0.08);
  --shadow-inner:    inset 0 1px 2px rgba(16, 24, 40, 0.05);

  /* ---------- MOTION ---------- */
  --ease-out:        cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-out-soft:   cubic-bezier(0.32, 0.72, 0, 1);
  --ease-in-out:     cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:        120ms;
  --dur-base:        200ms;
  --dur-slow:        360ms;
}

/* ============================================================
   SEMANTIC TYPE — apply to real elements
   ============================================================ */

.display-xl,
.display-l,
.display-m,
.display-s,
h1, h2, h3 {
  font-family: var(--font-display);
  color: var(--ink-1);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  text-wrap: balance;
}

.display-xl { font-size: var(--t-display-xl); letter-spacing: var(--ls-display-tight); }
.display-l  { font-size: var(--t-display-l); }
.display-m  { font-size: var(--t-display-m); line-height: var(--lh-snug); letter-spacing: var(--ls-display-s); }
.display-s  { font-size: var(--t-display-s); line-height: var(--lh-normal); letter-spacing: var(--ls-display-s); }
h1          { font-size: var(--t-h1); line-height: var(--lh-snug); letter-spacing: var(--ls-display-s); }
h2          { font-size: var(--t-h2); line-height: var(--lh-snug); letter-spacing: 0; font-weight: 600; font-family: var(--font-ui); }
h3          { font-size: var(--t-h3); line-height: var(--lh-snug); letter-spacing: 0; font-weight: 600; font-family: var(--font-ui); }

/* Italic / emphasis variant used in headlines — now: keep optional italic, recolor to Kraken Purple */
.display-italic { font-style: italic; color: var(--ember-500); }

.eyebrow {
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink-3);
}

.label {
  font-family: var(--font-ui);
  font-size: var(--t-body-s);
  font-weight: 500;
  color: var(--ink-2);
  letter-spacing: var(--ls-ui);
}

body, .body, p {
  font-family: var(--font-ui);
  font-size: var(--t-body);
  line-height: var(--lh-loose);
  color: var(--ink-1);
  letter-spacing: var(--ls-ui);
  font-weight: 400;
}

.body-l { font-size: var(--t-body-l); line-height: var(--lh-loose); }
.body-s { font-size: var(--t-body-s); line-height: var(--lh-caption); }

.caption {
  font-family: var(--font-ui);
  font-size: var(--t-caption);
  line-height: var(--lh-caption);
  color: var(--ink-3);
  letter-spacing: var(--ls-ui);
}

.mono, code, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.94em;
  font-feature-settings: 'tnum' 1;
}

.numeric, .tabular {
  font-family: var(--font-mono);
  font-feature-settings: 'tnum' 1;
  letter-spacing: 0;
}

/* ============================================================
   BASE
   ============================================================ */

html, body {
  background: var(--surface-bone);
  color: var(--ink-1);
  font-family: var(--font-ui);
  font-size: var(--t-body);
  line-height: var(--lh-loose);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--ember-100);
  color: var(--ember-700);
}

/* ============================================================
   DARK MODE — cool charcoal with purple shifted lighter for legibility.
   ============================================================ */

[data-theme="dark"] {
  --surface-bone:     #0B0C0E;
  --surface-canvas:   #15171C;
  --surface-paper:    #1A1C22;
  --surface-sand:     #20232B;
  --surface-clay:     #2D313B;
  --surface-ink:      #050608;
  --surface-ink-2:    #0B0C0E;

  --ink-1:            #F6F6F8;
  --ink-2:            #C7C8D1;
  --ink-3:            #9497A9;
  --ink-4:            #686B82;
  --ink-on-dark:      #101114;
  --ink-on-dark-2:    #484B5E;

  --border-soft:      rgba(246, 246, 248, 0.06);
  --border-default:   rgba(246, 246, 248, 0.12);
  --border-strong:    rgba(246, 246, 248, 0.20);
  --border-focus:     #8E5DF8;

  /* Purple shifts brighter in dark for contrast */
  --ember-50:         #1F1338;
  --ember-100:        #2C0875;
  --ember-200:        #4313A4;
  --ember-300:        #5B1ECF;
  --ember-400:        #7132F5;
  --ember-500:        #8E5DF8;
  --ember-600:        #B193FA;
  --ember-700:        #D2BFFC;
  --ember-800:        #E8DFFD;
  --ember-900:        #F4EFFE;

  --brass-100:        #20232B;
  --brass-300:        #484B5E;
  --brass-500:        #686B82;
  --brass-700:        #9497A9;

  --gain-bg:          rgba(58, 178, 116, 0.16);
  --gain-fg:          #5DD49A;
  --gain-500:         #3FB37A;
  --gain-strong:      #5DD49A;

  --loss-bg:          rgba(232, 96, 78, 0.18);
  --loss-fg:          #F08A78;
  --loss-500:         #E8604E;
  --loss-strong:      #F08A78;

  --warn-bg:          rgba(232, 175, 60, 0.16);
  --warn-fg:          #E8C46A;
  --warn-500:         #E8AF3C;

  --info-bg:          rgba(142, 93, 248, 0.16);
  --info-fg:          #B193FA;
  --info-500:         #8E5DF8;

  --shadow-whisper:  0 1px 2px rgba(0, 0, 0, 0.24);
  --shadow-soft:     0 2px 8px rgba(0, 0, 0, 0.28);
  --shadow-card:     0 4px 16px rgba(0, 0, 0, 0.32), 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-lifted:   0 12px 32px rgba(0, 0, 0, 0.48), 0 2px 6px rgba(0, 0, 0, 0.3);
  --shadow-modal:    0 24px 64px rgba(0, 0, 0, 0.6), 0 4px 12px rgba(0, 0, 0, 0.4);
}

html, body { transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); }