/* ==========================================================================
   tokens.css — design tokens. Every colour, size, easing and duration used
   anywhere on the site is defined here, once, for both themes.
   ========================================================================== */

/* Avenir is a licensed Monotype face: it is used from the visitor's own
   system (bundled with macOS, iOS and iPadOS) and never downloaded. Everyone
   else gets Nunito Sans, the closest open-licence match, from Google Fonts —
   browsers only fetch it when Avenir and Avenir Next are both missing.
   "Avenir Fallback" keeps metrics close while that web font loads. */
@font-face {
  font-family: "Avenir Fallback";
  src: local("Helvetica Neue"), local("Arial"), local("Liberation Sans");
  size-adjust: 101%;
  ascent-override: 100%;
  descent-override: 35%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Mono Fallback";
  src: local("Menlo"), local("Consolas"), local("DejaVu Sans Mono"), local("Liberation Mono");
  size-adjust: 100%;
}

:root {
  color-scheme: light;

  /* ---- Palette · light ------------------------------------------------ */
  --bg: #fafaf8;
  --bg-elev: #ffffff;
  --bg-sunk: #f1f1ec;
  --ink: #111318;
  --ink-2: #393e47;
  --muted: #5d636e;
  --line: rgb(17 19 24 / 0.1);
  --line-strong: rgb(17 19 24 / 0.2);
  --grid-line: rgb(11 92 171 / 0.045);

  --accent: #0b5cab;          /* Salesforce-family blue, kept deep for contrast */
  --accent-ink: #ffffff;      /* text on accent */
  --accent-soft: rgb(11 92 171 / 0.08);
  --accent-glow: rgb(11 92 171 / 0.35);
  --flow: #0a7464;            /* data / flow highlights */
  --flow-soft: rgb(11 125 108 / 0.12);
  --flow-glow: rgb(15 160 138 / 0.45);
  --ok: #0f7a47;

  --spot: rgb(11 92 171 / 0.07);         /* card cursor spotlight */
  /* Elevation is reserved for things that float above the page (menus, dialogs). */
  --shadow: 0 1px 0 rgb(17 19 24 / 0.03), 0 12px 32px -18px rgb(17 19 24 / 0.22);
  --noise-opacity: 0.045;
  --foil-blend: multiply;
  --foil-opacity: 0.4;

  /* ---- Typography ----------------------------------------------------- */
  /* One family for the whole site; hierarchy comes from weight and size. */
  --font-sans: "Avenir", "Avenir Next", "Nunito Sans", "Avenir Fallback", -apple-system, "Segoe UI", system-ui, sans-serif;
  --font-display: var(--font-sans);
  --font-label: var(--font-sans);     /* small technical labels */
  --font-mono: "JetBrains Mono", "Mono Fallback", ui-monospace, monospace; /* terminal + key caps only */

  /* Weights chosen to land on real faces in every family in the stack:
     Avenir Light/Book/Medium/Heavy · Avenir Next Ultra Light…Heavy · Nunito Sans 300–800. */
  --fw-light: 300;
  --fw-book: 400;
  --fw-medium: 500;
  --fw-heavy: 800;

  --fs-2xs: clamp(0.72rem, 0.7rem + 0.08vw, 0.76rem);
  --fs-xs: clamp(0.75rem, 0.73rem + 0.1vw, 0.8rem);
  --fs-sm: clamp(0.875rem, 0.85rem + 0.12vw, 0.94rem);
  --fs-base: clamp(1rem, 0.96rem + 0.18vw, 1.0625rem);
  --fs-lg: clamp(1.125rem, 1.05rem + 0.4vw, 1.3125rem);
  --fs-xl: clamp(1.375rem, 1.17rem + 0.95vw, 1.95rem);
  --fs-2xl: clamp(2rem, 1.45rem + 2.6vw, 3.6rem);
  /* Avenir Heavy is far wider than the old condensed serif, so the display
     size steps down to keep "Katarmal" on one line at every width. */
  --fs-display: clamp(3rem, 1.3rem + 6.6vw, 7rem);

  --lh-tight: 1.08;
  --lh-snug: 1.3;
  --lh-body: 1.68;
  --tracking-display: -0.035em;
  --tracking-heading: -0.022em;
  --tracking-body: 0.005em;
  --tracking-label: 0.03em;
  --tracking-mono: 0.02em;

  /* ---- Space & layout ------------------------------------------------- */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4.5rem;
  --s-9: clamp(4.5rem, 3rem + 6vw, 9rem);

  --container: 1240px;
  --gutter: clamp(16px, 4vw, 48px);
  --cols: 12;
  --col-gap: clamp(12px, 1.6vw, 24px);
  --header-h: 60px;

  /* Semantic spacing: every gap on the page maps to one of these. */
  --space-section: var(--s-9);   /* between sections */
  --space-block: var(--s-7);     /* between major blocks inside a section */
  --space-stack: var(--s-5);     /* between items inside a block */
  --pad-card: clamp(1.25rem, 1rem + 1.2vw, 2rem); /* every card and panel */
  --pad-bar: 0.75rem 1.125rem;   /* header/footer strips inside panels */

  /* Radii: four steps plus pill, used by role, not by component. */
  --radius-xs: 6px;    /* key caps, tiny marks */
  --radius-sm: 10px;   /* controls: icon buttons, menu items, list rows */
  --radius: 12px;      /* menus and popovers */
  --radius-lg: 18px;   /* cards, panels, dialogs */
  --radius-pill: 999px;
  --hairline: 1px;

  /* ---- Terminal: its own dark palette in both themes ----------------- */
  --t-bg: #0a0c10;
  --t-ink: #d7deea;
  --t-dim: #7f8796;
  --t-acc: #78b0fd;
  --t-ok: #4fd68e;
  --t-flow: #4fd6bc;
  --t-err: #ff8a8a;
  --t-line: rgb(255 255 255 / 0.1);
  --t-line-strong: rgb(255 255 255 / 0.14);
  --t-shadow: 0 40px 100px -30px rgb(0 0 0 / 0.7);

  /* ---- Motion — only these three curves are used anywhere ------------ */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);       /* arrivals, reveals */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);   /* state changes */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* playful returns */
  --dur-1: 160ms;
  --dur-2: 320ms;
  --dur-3: 700ms;
  --dur-4: 1200ms;
}

/* ---- Palette · dark (tuned, not inverted) ------------------------------ */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b0d11;
  --bg-elev: #12151b;
  --bg-sunk: #08090c;
  --ink: #eceae4;
  --ink-2: #c3c5cb;
  --muted: #8f95a1;
  --line: rgb(236 234 228 / 0.09);
  --line-strong: rgb(236 234 228 / 0.18);
  --grid-line: rgb(120 176 253 / 0.04);

  --accent: #78b0fd;
  --accent-ink: #0b0d11;
  --accent-soft: rgb(120 176 253 / 0.1);
  --accent-glow: rgb(120 176 253 / 0.5);
  --flow: #4fd6bc;
  --flow-soft: rgb(79 214 188 / 0.12);
  --flow-glow: rgb(79 214 188 / 0.55);
  --ok: #4fd68e;

  --spot: rgb(120 176 253 / 0.09);
  --shadow: 0 1px 0 rgb(0 0 0 / 0.4), 0 16px 40px -20px rgb(0 0 0 / 0.8);
  --noise-opacity: 0.06;
  --foil-blend: color-dodge;
  --foil-opacity: 0.32;
}

/* Follow the OS when the visitor hasn't chosen a theme. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0b0d11;
    --bg-elev: #12151b;
    --bg-sunk: #08090c;
    --ink: #eceae4;
    --ink-2: #c3c5cb;
    --muted: #8f95a1;
    --line: rgb(236 234 228 / 0.09);
    --line-strong: rgb(236 234 228 / 0.18);
    --grid-line: rgb(120 176 253 / 0.04);
    --accent: #78b0fd;
    --accent-ink: #0b0d11;
    --accent-soft: rgb(120 176 253 / 0.1);
    --accent-glow: rgb(120 176 253 / 0.5);
    --flow: #4fd6bc;
    --flow-soft: rgb(79 214 188 / 0.12);
    --flow-glow: rgb(79 214 188 / 0.55);
    --ok: #4fd68e;
    --spot: rgb(120 176 253 / 0.09);
    --shadow: 0 1px 0 rgb(0 0 0 / 0.4), 0 16px 40px -20px rgb(0 0 0 / 0.8);
    --noise-opacity: 0.06;
    --foil-blend: color-dodge;
    --foil-opacity: 0.32;
  }
}