/* =============================================================
   Trinity Agency — Colors & Type
   Source of truth: packages/design-system/src/tokens/{colors,typography,effects}.css
   Color space: OKLCH for perceptual uniformity.
   Default surface is DARK. Trinity Blue is the prime accent.
   ============================================================= */

/* Fonts: JetBrains Mono (headings/code) + IBM Plex Sans (body) — local brand variable fonts. */

@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/JetBrainsMono-VariableFont_wght.ttf') format('truetype-variations'),
       url('fonts/JetBrainsMono-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/JetBrainsMono-Italic-VariableFont_wght.ttf') format('truetype-variations'),
       url('fonts/JetBrainsMono-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('fonts/IBMPlexSans-VariableFont_wdth,wght.ttf') format('truetype-variations'),
       url('fonts/IBMPlexSans-VariableFont_wdth,wght.ttf') format('truetype');
  font-weight: 100 700;
  font-stretch: 85% 100%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('fonts/IBMPlexSans-Italic-VariableFont_wdth,wght.ttf') format('truetype-variations'),
       url('fonts/IBMPlexSans-Italic-VariableFont_wdth,wght.ttf') format('truetype');
  font-weight: 100 700;
  font-stretch: 85% 100%;
  font-style: italic;
  font-display: swap;
}

:root {
  /* -----------------------------------------------------------
     1. TRINITY BLUE — brand accent
     ----------------------------------------------------------- */
  --trinity:        oklch(52.4% 0.135 257.7);   /* mittel  ~#3369B6 — primary */
  --trinity-light:  oklch(65.7% 0.152 248.7);   /* hell    ~#3696E9 — dark mode primary, glows */
  --trinity-dark:   oklch(38.5% 0.158 264.3);   /* dunkel  ~#163996 — pressed, deep accents */
  --trinity-hover:  oklch(47.1% 0.122 257.9);   /* hover   ~#2B5A9E */
  --trinity-steel:  oklch(49.9% 0.099 250.4);   /* accent  ~#336699 — desaturated steel */

  /* -----------------------------------------------------------
     2. HEAT — orange counter-accent (hot/cold contrast)
     Used sparingly: alerts, "live" indicators, warm highlights
     ----------------------------------------------------------- */
  --heat:           oklch(72% 0.165 55);        /* primary heat ~#F09556 */
  --heat-light:     oklch(80% 0.140 60);        /* soft warm */
  --heat-dark:      oklch(58% 0.180 45);        /* deep ember */

  /* -----------------------------------------------------------
     3. NEUTRAL SCALE — subtle blue undertone
     ----------------------------------------------------------- */
  --neutral-50:  oklch(98% 0.003 260);
  --neutral-100: oklch(95% 0.004 260);
  --neutral-200: oklch(92% 0.005 260);
  --neutral-300: oklch(85% 0.006 260);
  --neutral-400: oklch(70% 0.007 260);
  --neutral-500: oklch(55% 0.008 260);
  --neutral-600: oklch(45% 0.007 260);
  --neutral-700: oklch(35% 0.006 260);
  --neutral-800: oklch(25% 0.005 260);
  --neutral-900: oklch(15% 0.004 260);
  --neutral-950: oklch(8%  0.003 260);

  /* -----------------------------------------------------------
     4. STATUS COLORS
     ----------------------------------------------------------- */
  --success:    oklch(65% 0.18 145);
  --warning:    oklch(75% 0.15 85);
  --error:      oklch(60% 0.22 25);
  --info:       oklch(62% 0.18 240);

  /* -----------------------------------------------------------
     5. SEMANTIC TOKENS — DARK by default
     Trinity is dark-first; light mode is provided as override.
     ----------------------------------------------------------- */
  --bg:               var(--neutral-950);
  --surface:          var(--neutral-900);
  --surface-elevated: var(--neutral-800);

  --fg1:              var(--neutral-50);   /* primary text */
  --fg2:              var(--neutral-300);  /* secondary text */
  --fg3:              var(--neutral-500);  /* muted / metadata */
  --fg-disabled:      var(--neutral-600);

  --border:           oklch(25% 0.005 260 / 60%);
  --border-strong:    var(--neutral-700);
  --border-glow:      oklch(65.7% 0.152 248.7 / 25%);

  --interactive:        var(--trinity-light);
  --interactive-hover:  var(--trinity);
  --interactive-press:  var(--trinity-dark);
  --focus-ring:         oklch(65.7% 0.152 248.7 / 60%);

  /* Highlights & decoration */
  --highlight:         var(--neutral-50);
  --highlight-subtle:  oklch(98% 0 0 / 8%);
  --dot-pattern:       oklch(98% 0 0 / 6%);
  --corner-decorator:  oklch(98% 0 0 / 80%);

  /* -----------------------------------------------------------
     6. TYPE — families
     ----------------------------------------------------------- */
  --font-heading: 'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;
  --font-body:    'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', 'Fira Code', Consolas, monospace;
  --font-sans:    'IBM Plex Sans', system-ui, -apple-system, sans-serif;

  /* -----------------------------------------------------------
     7. TYPE — sizes (semantic scale, VoidAI-derived)
     ----------------------------------------------------------- */
  --text-display: clamp(4rem, 8vw + 2rem, 10.375rem);    /* 166px max */
  --text-h1:      clamp(2.75rem, 4vw + 1rem, 10.375rem); /* 166px max */
  --text-h2:      clamp(1.75rem, 2vw + 1rem, 2.75rem);   /* 44px */
  --text-h3:      clamp(1.375rem, 1.5vw + 0.5rem, 1.75rem); /* 28px */
  --text-h4:      clamp(1.125rem, 1vw + 0.5rem, 1.375rem);  /* 22px */
  --text-h5:      clamp(0.9375rem, 0.5vw + 0.5rem, 1.125rem);/* 18px */
  --text-p1:      1rem;     /* 16px body */
  --text-p2:      0.875rem; /* 14px secondary */
  --text-p3:      0.75rem;  /* 12px caption / label */

  /* -----------------------------------------------------------
     8. TYPE — weights, leading, tracking
     ----------------------------------------------------------- */
  --font-normal:   400;
  --font-medium:   500;
  --font-semibold: 600;
  --font-bold:     700;

  --leading-display: 1.1;
  --leading-heading: 1.2;
  --leading-tight:   1.25;
  --leading-snug:    1.375;
  --leading-body:    1.6;
  --leading-relaxed: 1.7;

  --tracking-display: -0.03em;
  --tracking-h2:      -0.02em;
  --tracking-h3:      -0.04em;
  --tracking-body:    -0.02em;
  --tracking-mono:     0;
  --tracking-label:    0.08em; /* mono labels often UPPERCASE wide */

  /* -----------------------------------------------------------
     9. SPACING — 4px 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;

  /* -----------------------------------------------------------
     10. RADIUS
     SYSTEM RULE: Square corners. The geometric-blue language
     uses sharp edges by default. The single exception is the
     CTAButton, which uses --radius-cta (3px) per the source
     primitive. --radius-full stays for true circles (dots,
     avatars, status pulses).
     ----------------------------------------------------------- */
  --radius-sm:   0;     /* WAS 4px — square */
  --radius-md:   0;     /* WAS 6px — square */
  --radius-lg:   0;     /* WAS 8px — square */
  --radius-xl:   0;     /* WAS 12px — square */
  --radius-2xl:  0;     /* WAS 16px — square */
  --radius-cta:  3px;   /* CTAButton ONLY — exception per cta-button.tsx */
  --radius-full: 9999px;

  /* -----------------------------------------------------------
     11. SHADOWS / ELEVATION
     ----------------------------------------------------------- */
  --shadow-sm: 0 1px 2px oklch(0% 0 0 / 30%);
  --shadow-md: 0 4px 12px oklch(0% 0 0 / 35%);
  --shadow-lg: 0 12px 32px oklch(0% 0 0 / 45%);
  --shadow-xl: 0 24px 64px oklch(0% 0 0 / 55%);
  --shadow-glow: 0 0 32px oklch(65.7% 0.152 248.7 / 35%);
  --shadow-heat: 0 0 24px oklch(72% 0.165 55 / 30%);
}

/* =============================================================
   LIGHT MODE OVERRIDE
   ============================================================= */
:root[data-theme="light"],
.light {
  --bg:               var(--neutral-50);
  --surface:          oklch(100% 0 0);
  --surface-elevated: oklch(100% 0 0);

  --fg1: var(--neutral-900);
  --fg2: var(--neutral-600);
  --fg3: var(--neutral-500);
  --fg-disabled: var(--neutral-400);

  --border:        var(--neutral-200);
  --border-strong: var(--neutral-300);
  --border-glow:   oklch(52.4% 0.135 257.7 / 25%);

  --interactive:        var(--trinity);
  --interactive-hover:  var(--trinity-dark);
  --interactive-press:  var(--trinity-dark);

  --highlight:        var(--trinity);
  --highlight-subtle: oklch(52.4% 0.135 257.7 / 12%);
  --dot-pattern:      oklch(52.4% 0.135 257.7 / 8%);
  --corner-decorator: var(--trinity);
}

/* =============================================================
   SEMANTIC ELEMENT DEFAULTS
   Authors should reach for variables. These reset ground-truth.
   ============================================================= */

html, body {
  background: var(--bg);
  color: var(--fg1);
  font-family: var(--font-body);
  font-size: var(--text-p1);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  font-weight: var(--font-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, .h1, .display {
  font-family: var(--font-heading);
  font-size: var(--text-h1);
  font-weight: var(--font-bold);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  color: var(--fg1);
}
.display { font-size: var(--text-display); }

h2, .h2 {
  font-family: var(--font-heading);
  font-size: var(--text-h2);
  font-weight: var(--font-bold);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-h2);
  color: var(--fg1);
}

h3, .h3 {
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  font-weight: var(--font-semibold);
  line-height: 1.4;
  letter-spacing: var(--tracking-h3);
  color: var(--fg1);
}

h4, .h4 {
  font-family: var(--font-heading);
  font-size: var(--text-h4);
  font-weight: var(--font-semibold);
  line-height: 1.5;
  color: var(--fg1);
}

h5, .h5 {
  font-family: var(--font-heading);
  font-size: var(--text-h5);
  font-weight: var(--font-medium);
  line-height: 1.4;
  color: var(--fg1);
}

p, .p1 {
  font-family: var(--font-body);
  font-size: var(--text-p1);
  line-height: var(--leading-body);
  color: var(--fg2);
}
.p2 { font-size: var(--text-p2); color: var(--fg2); }
.p3 { font-size: var(--text-p3); color: var(--fg3); }

/* Mono micro-labels — used for tags, eyebrows, "section 01" markers */
.label, .eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-p3);
  font-weight: var(--font-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--fg3);
}

code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: 0.9em;
}
code {
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 2px 6px;
}

a {
  color: var(--interactive);
  text-decoration: none;
  transition: color 160ms ease;
}
a:hover { color: var(--interactive-hover); }

::selection { background: oklch(65.7% 0.152 248.7 / 35%); color: var(--fg1); }