/* ============================================================
   Eudai — Colors & Type Foundation
   ------------------------------------------------------------
   Brand tokens, semantic aliases, and typography presets.
   Import this once in any HTML; reference via var(--token).
   ============================================================ */

/* ---------- Webfonts (CDN, flagged substitutions) ----------
   The Eudai wordmark uses a bold geometric grotesque. Until the
   real brand font is supplied, we substitute Plus Jakarta Sans
   for display/headings and Inter for body — both have closed
   apertures, geometric circles, and tall x-heights similar to
   the logo. See README › "Fonts (substitution flagged)".
*/
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ============================================================
     1. RAW BRAND PALETTE — every swatch from the source palette
     ============================================================ */
  --eudai-orange:        #ff4f00;  /* signature accent — energy, alerts */
  --eudai-navy:          #1f2b48;  /* primary ink / logomark text */
  --eudai-blue:          #0073ea;  /* information, links, focus rings */
  --eudai-violet:        #6c5dd3;  /* secondary brand accent */
  --eudai-purple:        #9747ff;  /* vibrant feature highlight */
  --eudai-aubergine:     #45397a;  /* deep accent, premium surfaces */
  --eudai-green:         #00cf7f;  /* success, growth, positive deltas */
  --eudai-pink:          #ff5d7e;  /* warm accent, badges, illustration */
  --eudai-teal:          #00a0b0;  /* cool accent, secondary data viz */
  --eudai-mist:          #f5f6f8;  /* page background, large surfaces */
  --eudai-fog:           #d0d4e4;  /* hairlines, dividers, disabled */

  /* ============================================================
     2. EXTENDED NEUTRAL RAMP — derived from --eudai-navy
     for hierarchical foreground & subtle surface variation.
     ============================================================ */
  --neutral-50:  #fafbfc;
  --neutral-100: #f5f6f8;   /* = mist */
  --neutral-200: #e9ecf2;
  --neutral-300: #d0d4e4;   /* = fog */
  --neutral-400: #a4abc1;
  --neutral-500: #707892;
  --neutral-600: #4d556e;
  --neutral-700: #323b56;
  --neutral-800: #1f2b48;   /* = navy */
  --neutral-900: #131a2e;
  --neutral-950: #0a0f1e;

  /* ============================================================
     3. SEMANTIC COLOR TOKENS — use these in product code, not raw.
     ============================================================ */

  /* Surfaces */
  --bg-page:        var(--neutral-100);
  --bg-canvas:      #ffffff;
  --bg-raised:      #ffffff;          /* cards, popovers */
  --bg-sunken:      var(--neutral-50);
  --bg-inverse:     var(--neutral-900);
  --bg-accent-soft: #fff3ed;          /* orange-tinted wash */

  /* Foreground (text) */
  --fg-1: var(--neutral-900);   /* primary ink, headings */
  --fg-2: var(--neutral-700);   /* body copy */
  --fg-3: var(--neutral-500);   /* secondary, captions */
  --fg-4: var(--neutral-400);   /* placeholders, disabled label */
  --fg-on-accent: #ffffff;
  --fg-on-inverse: #ffffff;

  /* Borders */
  --border-subtle: var(--neutral-200);
  --border-base:   var(--neutral-300);
  --border-strong: var(--neutral-400);
  --border-focus:  var(--eudai-blue);

  /* Brand / interactive */
  --accent:          var(--eudai-orange);
  --accent-hover:    #e64600;
  --accent-pressed:  #cc3e00;
  --accent-soft:     #ffe4d6;

  --brand-primary:   var(--eudai-navy);
  --brand-secondary: var(--eudai-purple);

  /* Status */
  --status-info:    var(--eudai-blue);
  --status-success: var(--eudai-green);
  --status-warning: #f59e0b;
  --status-danger:  #ef4444;

  /* Data viz palette (categorical, distinguishable) */
  --viz-1: var(--eudai-orange);
  --viz-2: var(--eudai-blue);
  --viz-3: var(--eudai-purple);
  --viz-4: var(--eudai-green);
  --viz-5: var(--eudai-pink);
  --viz-6: var(--eudai-teal);
  --viz-7: var(--eudai-aubergine);
  --viz-8: var(--eudai-violet);

  /* ============================================================
     4. TYPEFACES
     ============================================================ */
  --font-display: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-sans:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ============================================================
     5. TYPE SCALE — six named roles from the source spec
     (Title, Subtitle, Heading, Subheading, Section, Body)
     ============================================================ */
  --fs-title:      56px;
  --fs-subtitle:   32px;
  --fs-heading:    28px;
  --fs-subheading: 20px;
  --fs-section:    16px;
  --fs-body:       15px;
  --fs-caption:    13px;
  --fs-micro:      11px;

  --lh-tight:  1.05;
  --lh-snug:   1.2;
  --lh-base:   1.5;
  --lh-loose:  1.7;

  --tracking-display: -0.03em;
  --tracking-tight:   -0.015em;
  --tracking-base:    0em;
  --tracking-wide:    0.02em;
  --tracking-eyebrow: 0.12em;

  /* ============================================================
     6. SPACING (4pt grid)
     ============================================================ */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ============================================================
     7. RADIUS — soft, modern; pill for chips/buttons
     ============================================================ */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-2xl:  28px;
  --radius-pill: 999px;

  /* ============================================================
     8. SHADOWS — layered, low-spread; tinted with navy alpha
     ============================================================ */
  --shadow-xs: 0 1px 1px rgba(31,43,72,0.04), 0 0 0 1px rgba(31,43,72,0.04);
  --shadow-sm: 0 1px 2px rgba(31,43,72,0.05), 0 1px 3px rgba(31,43,72,0.06);
  --shadow-md: 0 2px 4px rgba(31,43,72,0.04), 0 6px 14px rgba(31,43,72,0.08);
  --shadow-lg: 0 8px 16px rgba(31,43,72,0.06), 0 18px 36px rgba(31,43,72,0.12);
  --shadow-xl: 0 16px 32px rgba(31,43,72,0.10), 0 32px 64px rgba(31,43,72,0.18);
  --shadow-focus: 0 0 0 3px rgba(0,115,234,0.25);
  --shadow-focus-accent: 0 0 0 3px rgba(255,79,0,0.25);

  /* ============================================================
     9. MOTION
     ============================================================ */
  --ease-out:     cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-instant:  80ms;
  --dur-fast:     140ms;
  --dur-base:     220ms;
  --dur-slow:     360ms;
}

/* ============================================================
   SEMANTIC TYPOGRAPHY PRESETS
   Apply directly to elements: <h1 class="t-title">…</h1>
   ============================================================ */

.t-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-title);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  color: var(--fg-1);
}

.t-subtitle {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-subtitle);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-2);
}

.t-heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-heading);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

.t-subheading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-subheading);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

.t-section {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-section);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-base);
  color: var(--fg-1);
}

.t-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  letter-spacing: var(--tracking-base);
  color: var(--fg-2);
}

.t-caption {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-caption);
  line-height: var(--lh-base);
  letter-spacing: var(--tracking-base);
  color: var(--fg-3);
}

.t-eyebrow {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-micro);
  line-height: 1;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-3);
}

.t-mono {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-caption);
  line-height: var(--lh-base);
  letter-spacing: 0;
  color: var(--fg-2);
}

/* Element defaults — opt in by adding class="eudai" to the body */
.eudai {
  font-family: var(--font-sans);
  color: var(--fg-1);
  background: var(--bg-page);
}
.eudai h1 { font: 800 var(--fs-title)/var(--lh-tight) var(--font-display); letter-spacing: var(--tracking-display); margin: 0; }
.eudai h2 { font: 700 var(--fs-heading)/var(--lh-snug) var(--font-display); letter-spacing: var(--tracking-tight); margin: 0; }
.eudai h3 { font: 700 var(--fs-subheading)/var(--lh-snug) var(--font-display); letter-spacing: var(--tracking-tight); margin: 0; }
.eudai h4 { font: 600 var(--fs-section)/var(--lh-snug) var(--font-sans); margin: 0; }
.eudai p  { font: 400 var(--fs-body)/var(--lh-base) var(--font-sans); color: var(--fg-2); margin: 0; }
.eudai code { font: 500 0.92em var(--font-mono); background: var(--neutral-200); padding: 1px 6px; border-radius: 4px; }
.eudai a { color: var(--eudai-blue); text-decoration: none; }
.eudai a:hover { color: var(--eudai-navy); text-decoration: underline; }