/* =====================================================================
   KEYKAN — Colors & Type Foundations
   Dark mode only. Editorial, geometric, sharp.
   ===================================================================== */

/* Brand-uploaded variable fonts (local) */
@font-face {
  font-family: "Geist";
  src: url("fonts/Geist-VariableFont_wght.ttf") format("truetype-variations"),
       url("fonts/Geist-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-VariableFont_opsz_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/JetBrainsMono-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- COLOR — RAW TOKENS ---------- */
  --color-deep-space-navy: #0B0F1A;   /* Primary background */
  --color-elevated-dark:   #1A1A2E;   /* Cards, surfaces */
  --color-electric-cobalt: #0057FF;   /* Primary CTA — buttons + logo ONLY, never text */
  --color-sky-blue:        #3FA9F5;   /* Interactive text + links */
  --color-gold-amber:      #F59E0B;   /* Accent — stats, badges; use sparingly */
  --color-white:           #FFFFFF;   /* Body copy */

  /* Greyscale derived from base — for borders and subdued copy */
  --color-rule:            #20243A;   /* Hairlines, dividers, card borders */
  --color-rule-bright:     #2C3148;   /* Hover/active rule */
  --color-muted:           #8A93A6;   /* Secondary text, meta, captions */
  --color-dim:             #5A6478;   /* Tertiary, deactivated */

  /* ---------- COLOR — SEMANTIC ---------- */
  --bg:                    var(--color-deep-space-navy);
  --bg-elevated:           var(--color-elevated-dark);
  --bg-elevated-hover:     #22223D;

  --fg:                    var(--color-white);
  --fg-muted:              var(--color-muted);
  --fg-dim:                var(--color-dim);

  --link:                  var(--color-sky-blue);
  --link-hover:            #6FC0F8;

  --accent:                var(--color-gold-amber);
  --accent-bright:         #FFB72E;

  --cta:                   var(--color-electric-cobalt);
  --cta-hover:             #1E6CFF;
  --cta-press:             #0046CC;
  --cta-fg:                var(--color-white);

  --rule:                  var(--color-rule);
  --rule-bright:           var(--color-rule-bright);

  /* ---------- TYPE — FAMILIES ---------- */
  --font-display: "Geist", "Inter", system-ui, sans-serif;       /* Headlines */
  --font-body:    "Inter", system-ui, -apple-system, sans-serif;   /* Body copy */
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; /* Stats, labels, code */

  /* ---------- TYPE — SCALE ---------- */
  /* Editorial, generous. Headlines lean tight; body leans roomy. */
  --fs-display:   88px;   /* Hero — name, headline takeover */
  --fs-h1:        64px;
  --fs-h2:        44px;
  --fs-h3:        28px;
  --fs-h4:        20px;
  --fs-body-lg:   20px;
  --fs-body:      17px;
  --fs-body-sm:   15px;
  --fs-meta:      13px;
  --fs-label:     12px;   /* Mono labels, eyebrows */

  --lh-tight:     1.02;
  --lh-snug:      1.15;
  --lh-normal:    1.45;
  --lh-loose:     1.6;

  --tracking-tight:  -0.02em;   /* Display headlines */
  --tracking-normal: 0;
  --tracking-wide:   0.08em;    /* Mono eyebrows + labels */
  --tracking-widest: 0.18em;    /* All-caps section eyebrows */

  /* ---------- SPACING ---------- */
  /* 8px base, generous. */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;
  --space-11: 192px;

  /* ---------- LAYOUT ---------- */
  --container-max: 1200px;
  --container-narrow: 720px;   /* Reading column */
  --gutter: 32px;
  --gutter-lg: 64px;

  /* ---------- BORDERS / RADII ---------- */
  /* NO ROUNDED CORNERS. Sharp, geometric. */
  --radius: 0px;
  --border-hairline: 1px solid var(--rule);
  --border-bright:   1px solid var(--rule-bright);
  --border-accent:   1px solid var(--accent);
  --border-cta:      1px solid var(--cta);

  /* ---------- MOTION ---------- */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:    cubic-bezier(0.55, 0, 1, 0.45);
  --ease-std:   cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   360ms;

  /* ---------- ELEVATION ---------- */
  /* Use sparingly — editorial dark surfaces lean on rules, not shadow. */
  --shadow-none: none;
  --shadow-sm:   0 1px 0 0 var(--rule);
  --shadow-md:   0 8px 24px 0 rgba(0, 0, 0, 0.4);
  --shadow-lg:   0 24px 60px 0 rgba(0, 0, 0, 0.55);
}

/* =====================================================================
   BASE
   ===================================================================== */
html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--cta); color: var(--cta-fg); }

/* =====================================================================
   SEMANTIC TYPE
   ===================================================================== */
.display, h1.display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}

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

h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}

h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: var(--lh-snug);
  color: var(--fg);
}

h4, .h4 {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 600;
  line-height: var(--lh-snug);
  color: var(--fg);
}

p, .body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  color: var(--fg);
  text-wrap: pretty;
}

.body-lg {
  font-family: var(--font-body);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-loose);
  color: var(--fg);
}

.body-sm, small {
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-normal);
  color: var(--fg-muted);
}

.meta {
  font-family: var(--font-body);
  font-size: var(--fs-meta);
  color: var(--fg-muted);
}

/* Mono labels / stats / eyebrows */
.label, .eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.stat {
  font-family: var(--font-mono);
  font-size: var(--fs-h2);
  font-weight: 500;
  color: var(--accent);
  letter-spacing: var(--tracking-normal);
  font-variant-numeric: tabular-nums;
}

code, kbd, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

/* Links — Sky Blue, never the CTA color */
a {
  color: var(--link);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-base) var(--ease-std), color var(--dur-base) var(--ease-std);
}
a:hover {
  color: var(--link-hover);
  border-bottom-color: var(--link-hover);
}

hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: var(--space-7) 0;
}