/* Credatum color, typography, and spacing tokens. */

@import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;600&family=Hanken+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ---------- BRAND FONTS ---------- */
  --font-display: 'Jost', 'Century Gothic', system-ui, sans-serif;  /* page headings; logo lettering uses original artwork */
  --font-sans:    'Hanken Grotesk', system-ui, -apple-system, sans-serif; /* body / UI */
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', monospace;   /* metadata / code / citations */

  /* ============================================================
     COLOR — PRIMITIVES
     ============================================================ */

  /* Ink — the blue-black depth, sampled from the logo field (#000207) */
  --ink-1000: #000207;   /* true brand black — page canvas */
  --ink-950:  #04070D;   /* canvas (lifted) */
  --ink-900:  #070C13;   /* surface 1 */
  --ink-850:  #0C131C;   /* surface 2 — cards */
  --ink-800:  #121B26;   /* surface 3 — raised / popover */
  --ink-750:  #18222F;   /* surface 4 — overlay / hover fill */
  --ink-700:  #1E2A38;   /* hairline-strong */
  --ink-650:  #263241;   /* border */
  --ink-600:  #33414F;   /* border-strong */
  --ink-500:  #475563;   /* muted line on dark */

  /* Mist — cool foreground scale (sampled wordmark white #F4F6F7) */
  --mist-50:  #F4F6F7;   /* primary text */
  --mist-100: #E4E9ED;
  --mist-200: #C7D0D8;
  --mist-300: #AEBAC4;   /* secondary text */
  --mist-400: #8593A0;
  --mist-500: #6B7886;   /* tertiary / muted */
  --mist-600: #515D6A;
  --mist-700: #3C4753;   /* faint / disabled */

  /* Teal — the brushstroke signal (sampled gradient #025D6D → #1AE4E6) */
  --teal-1000:#022B33;   /* deepest tint fill */
  --teal-900: #043E48;
  --teal-800: #064A56;
  --teal-700: #066C78;
  --teal-600: #0A8F92;
  --teal-500: #02ABAD;   /* core brand teal */
  --teal-400: #15C2BE;   /* primary accent on dark — luminous */
  --teal-300: #34D6CF;   /* hover / brighter */
  --teal-200: #6FE6DF;
  --teal-100: #A8F0EB;
  --teal-glow:#1AE4E6;   /* brightest highlight / glow */

  /* ============================================================
     COLOR — SEMANTIC (dark-first; the brand lives on near-black)
     ============================================================ */
  --bg-canvas:    var(--ink-1000);
  --bg-base:      var(--ink-950);
  --surface-1:    var(--ink-900);
  --surface-2:    var(--ink-850);
  --surface-3:    var(--ink-800);
  --surface-hover:var(--ink-750);

  --fg-1:  var(--mist-50);    /* headings / primary */
  --fg-2:  var(--mist-300);   /* body secondary */
  --fg-3:  var(--mist-500);   /* captions / muted */
  --fg-4:  var(--mist-700);   /* disabled / faint */
  --fg-on-accent: var(--ink-1000); /* text on a teal fill */

  --line-1: var(--ink-700);   /* hairline */
  --line-2: var(--ink-650);   /* default border */
  --line-3: var(--ink-600);   /* strong border / focus ring base */

  --accent:        var(--teal-400);
  --accent-strong: var(--teal-300);
  --accent-deep:   var(--teal-600);
  --accent-tint:   color-mix(in oklab, var(--teal-500) 14%, transparent);
  --accent-tint-2: color-mix(in oklab, var(--teal-500) 24%, transparent);
  --focus-ring:    color-mix(in oklab, var(--teal-400) 55%, transparent);

  /* Status — kept harmonious with the cool field */
  --success:   #34C77B;
  --success-bg:color-mix(in oklab, #34C77B 15%, transparent);
  --warning:   #E5A93C;
  --warning-bg:color-mix(in oklab, #E5A93C 15%, transparent);
  --danger:    #E85A50;
  --danger-bg: color-mix(in oklab, #E85A50 15%, transparent);
  --info:      #4FA3E6;
  --info-bg:   color-mix(in oklab, #4FA3E6 15%, transparent);

  /* ============================================================
     RADII
     ============================================================ */
  --r-xs: 4px;
  --r-sm: 7px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-2xl: 28px;
  --r-pill: 999px;

  /* ============================================================
     ELEVATION — shadows read as depth-of-field on near-black,
     plus an optional teal "signal" glow for active/brand moments
     ============================================================ */
  --shadow-1: 0 1px 2px rgba(0,0,0,.5);
  --shadow-2: 0 4px 14px -4px rgba(0,0,0,.6), 0 1px 0 rgba(255,255,255,.02) inset;
  --shadow-3: 0 18px 48px -12px rgba(0,0,0,.7), 0 1px 0 rgba(255,255,255,.03) inset;
  --shadow-pop: 0 24px 64px -16px rgba(0,0,0,.78);
  --glow-teal: 0 0 0 1px color-mix(in oklab, var(--teal-400) 40%, transparent),
               0 0 28px -6px color-mix(in oklab, var(--teal-glow) 55%, transparent);
  --glow-teal-soft: 0 0 32px -10px color-mix(in oklab, var(--teal-glow) 45%, transparent);

  /* ============================================================
     SPACING (4px base) — see README spacing scale
     ============================================================ */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px;

  /* ============================================================
     TYPE SCALE (primitives)
     ============================================================ */
  --text-display: 600 clamp(44px, 6vw, 76px)/1.02 var(--font-display);
  --text-h1: 500 clamp(32px, 3.4vw, 44px)/1.08 var(--font-display);
  --text-h2: 500 clamp(25px, 2.4vw, 32px)/1.14 var(--font-display);
  --text-h3: 600 21px/1.25 var(--font-sans);
  --text-h4: 600 17px/1.35 var(--font-sans);
  --text-body-lg: 400 18px/1.6 var(--font-sans);
  --text-body: 400 15px/1.6 var(--font-sans);
  --text-body-sm: 400 13.5px/1.55 var(--font-sans);
  --text-caption: 500 12px/1.4 var(--font-sans);
  --text-mono: 500 13px/1.5 var(--font-mono);
  --track-wide: 0.16em;   /* wordmark-style tracking */
  --track-mid: 0.06em;
}

/* ============================================================
   SEMANTIC TYPE CLASSES
   ============================================================ */
.t-display {
  font: var(--text-display);
  letter-spacing: -0.01em;
  color: var(--fg-1);
}
.t-h1 { font: var(--text-h1); letter-spacing: 0.005em; color: var(--fg-1); }
.t-h2 { font: var(--text-h2); color: var(--fg-1); }
.t-h3 { font: var(--text-h3); letter-spacing: 0.005em; color: var(--fg-1); }
.t-h4 { font: var(--text-h4); color: var(--fg-1); }
.t-body-lg { font: var(--text-body-lg); color: var(--fg-2); }
.t-body { font: var(--text-body); color: var(--fg-2); }
.t-body-sm { font: var(--text-body-sm); color: var(--fg-2); }
.t-caption { font: var(--text-caption); color: var(--fg-3); }
.t-mono { font: var(--text-mono); color: var(--fg-2); letter-spacing: 0; }

/* Overline / eyebrow — the brand's signature wide-tracked uppercase,
   straight from "KNOW WHAT YOU KNOW" */
.t-overline {
  font: 500 12px/1 var(--font-display);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--accent);
}

/* Wordmark lockup helper */
.t-wordmark {
  font: 400 1em/1 var(--font-display);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--fg-1);
}

/* Brand gradient text — the brushstroke teal as ink */
.t-gradient {
  background: linear-gradient(95deg, var(--teal-500) 0%, var(--teal-300) 50%, var(--teal-glow) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}