/* ============================================================
   Keryx Labs — Design Tokens v1.0
   Drop this anywhere. Import once. Use everywhere.
   ============================================================ */

:root {
  /* ---------- Brand gradient (sampled from the Keryx mark) ---------- */
  --keryx-cyan:    #00E5FF;
  --keryx-blue:    #19BEEC;
  --keryx-violet:  #6B1FF2;
  --keryx-magenta: #E11FFB;

  --keryx-grad: linear-gradient(
    135deg,
    var(--keryx-cyan) 0%,
    var(--keryx-blue) 30%,
    var(--keryx-violet) 65%,
    var(--keryx-magenta) 100%
  );

  --keryx-grad-soft: linear-gradient(
    135deg,
    rgb(0 229 255 / 0.18) 0%,
    rgb(107 31 242 / 0.20) 60%,
    rgb(225 31 251 / 0.18) 100%
  );

  /* ---------- Surfaces (dark-first) ---------- */
  --bg-canvas:    #050507;  /* page background */
  --bg-base:      #0A0A0F;  /* default surface */
  --bg-elevated:  #11111A;  /* cards, panels */
  --bg-overlay:   #181824;  /* nested surfaces, popovers */
  --bg-pop:       #21212F;  /* highest elevation */

  /* ---------- Lines ---------- */
  --line-subtle:  #1F1F2C;
  --line-default: #2A2A3A;
  --line-strong:  #3A3A50;

  /* ---------- Foreground ---------- */
  --fg-muted:     #6B7080;  /* labels, captions */
  --fg-default:   #A8AEBE;  /* body */
  --fg-strong:    #E4E6EC;  /* emphasis */
  --fg-hero:      #FFFFFF;  /* display headlines */

  /* ---------- Semantic accents ---------- */
  --accent-emerald: #10D17B;  /* success */
  --accent-amber:   #F5B547;  /* warning */
  --accent-rose:    #FF5470;  /* error / destructive */
  --accent-info:    #6BA8FF;  /* info / links */

  /* Atmospheric */
  --navy-deep: #06112A;       /* gradient mesh / glow only */

  /* ---------- Typography ---------- */
  --font-display: "Inter", "Geist", "Söhne", system-ui, sans-serif;
  --font-body:    "Inter", "Söhne", "IBM Plex Sans", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;

  --fs-display-1: 88px;  --lh-display-1: 1.00;  --tr-display-1: -0.045em;
  --fs-display-2: 64px;  --lh-display-2: 1.05;  --tr-display-2: -0.035em;
  --fs-h1:        44px;  --lh-h1:        1.10;  --tr-h1:        -0.030em;
  --fs-h2:        32px;  --lh-h2:        1.20;  --tr-h2:        -0.020em;
  --fs-h3:        24px;  --lh-h3:        1.30;  --tr-h3:        -0.015em;
  --fs-h4:        18px;  --lh-h4:        1.40;  --tr-h4:        -0.010em;
  --fs-body:      15px;  --lh-body:      1.60;  --tr-body:       0;
  --fs-small:     13px;  --lh-small:     1.55;
  --fs-caption:   11px;  --lh-caption:   1.50;
  --fs-eyebrow:   11px;  --tr-eyebrow:    0.22em;

  /* ---------- Spacing (4px atom) ---------- */
  --s-1:  4px;   --s-2:  8px;   --s-3:  12px;
  --s-4:  16px;  --s-5:  20px;  --s-6:  24px;
  --s-8:  32px;  --s-10: 40px;  --s-12: 48px;
  --s-16: 64px;  --s-20: 80px;

  /* ---------- Container widths ---------- */
  --container-prose:   720px;
  --container-narrow:  960px;
  --container-default: 1200px;
  --container-wide:    1440px;

  /* ---------- Radius ---------- */
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-xl:   16px;
  --r-2xl:  20px;
  --r-full: 999px;

  /* ---------- Motion ---------- */
  --m-instant: 80ms;   /* hover, focus */
  --m-quick:   160ms;  /* tooltips, dropdowns */
  --m-base:    240ms;  /* cards, sheets */
  --m-page:    420ms;  /* route transitions, hero reveals */

  --ease-out-expo: cubic-bezier(0.16, 1, 0.30, 1);
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);

  /* ---------- Shadows (used sparingly on dark; mostly for light surfaces) ---------- */
  --shadow-sm:  0 1px 2px rgb(0 0 0 / 0.40);
  --shadow-md:  0 4px 12px rgb(0 0 0 / 0.50);
  --shadow-lg:  0 12px 32px rgb(0 0 0 / 0.55);
  --shadow-glow-cyan:    0 8px 32px rgb(0 229 255 / 0.18);
  --shadow-glow-magenta: 0 8px 32px rgb(225 31 251 / 0.22);
}

/* ---------- Sensible base resets ---------- */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg-canvas);
  color: var(--fg-strong);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv11" 1, "ss01" 1;
}

body { color-scheme: dark; }

a { color: var(--accent-info); text-decoration: none; }
a:hover { color: var(--fg-hero); }

/* Tabular numerals for any element with .num */
.num, code, kbd, samp, tt { font-feature-settings: "tnum" 1, "cv11" 1, "zero" 1; }

/* Honour reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 120ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Optional utilities (use as needed) ---------- */
.keryx-grad-text {
  background: var(--keryx-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--fg-muted);
}