/* kianshah.in design tokens.
   Every colour, type size, space, radius, shadow and timing used on the site
   is defined here and nowhere else. Dark is the default theme; the light
   theme ([data-theme="light"] on <html>) overrides the semantic layer only. */

@font-face {
  font-family: "Lexend";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("/fonts/lexend-latin-wght.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

/* Arial resized to Lexend's average advance and given Lexend's line metrics,
   so text set in the fallback occupies the same space and nothing moves when
   Lexend arrives. Regular weights and bold weights are matched separately. */
@font-face {
  font-family: "Lexend fallback";
  font-weight: 100 549;
  src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Arimo");
  size-adjust: 110.61%;
  ascent-override: 90.41%;
  descent-override: 22.6%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Lexend fallback";
  font-weight: 550 900;
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("Arimo Bold");
  size-adjust: 106.11%;
  ascent-override: 94.24%;
  descent-override: 23.56%;
  line-gap-override: 0%;
}

:root {
  color-scheme: dark;

  /* palette: the ten stops of the strip's gradient, navy first */
  --c-navy: #001219;
  --c-teal-1: #005f73;
  --c-teal-2: #0a9396;
  --c-mint: #94d2bd;
  --c-sand: #e9d8a6;
  --c-amber: #ee9b00;
  --c-rust: #ca6702;
  --c-ember: #bb3e03;
  --c-brick: #ae2012;
  --c-wine: #9b2226;

  --c-ice: #e6edf0;
  --c-paper: #f6f2ea;
  --c-panel: #04202a;
  --c-white: #ffffff;
  --c-black: #000000;

  /* semantic colours */
  --bg: var(--c-navy);
  --bg-raised: var(--c-panel);
  --text: var(--c-ice);
  --text-strong: var(--c-ice);
  --text-muted: color-mix(in srgb, var(--c-mint) 70%, var(--bg));
  --text-faint: color-mix(in srgb, var(--c-mint) 45%, var(--bg));
  --accent: var(--c-amber);
  --accent-hover: var(--c-rust);
  --accent-2: var(--c-teal-2);
  --link: var(--c-amber);
  --link-hover: var(--c-rust);
  --link-line: var(--c-amber);
  --focus: var(--c-amber);
  --line: color-mix(in srgb, var(--c-mint) 12%, transparent);
  --line-strong: color-mix(in srgb, var(--c-mint) 30%, transparent);
  --wash: color-mix(in srgb, var(--c-teal-2) 8%, transparent);
  --wash-strong: color-mix(in srgb, var(--c-teal-2) 22%, transparent);
  --surface: color-mix(in srgb, var(--c-navy) 60%, transparent);
  --bar: color-mix(in srgb, var(--bg) 72%, transparent);
  --scrim: color-mix(in srgb, var(--c-black) 60%, transparent);
  --tap: color-mix(in srgb, var(--c-mint) 18%, transparent);
  --wire: var(--c-teal-2);
  --strip-glow: color-mix(in srgb, var(--c-teal-2) 10%, transparent);
  --name: var(--c-mint);
  --label: var(--c-sand);
  --label-hover: color-mix(in srgb, var(--c-sand) 55%, var(--c-white));
  --control: var(--c-mint);
  --control-ink: var(--c-navy);

  /* data marks in the research instruments */
  --viz-teal: var(--c-teal-2);
  --viz-dot: #d3dcdf;
  --viz-gold: #c2862a;
  --viz-gold-text: #e8c07a;
  --viz-pass: #bfe9dd;
  --viz-fail: #ffb4a8;
  --viz-fail-wash: color-mix(in srgb, var(--c-brick) 28%, transparent);
  --viz-node: #0c2630;
  --viz-strong: #f2ede0;
  --viz-ramp-lo: oklch(0.30 0.04 195);
  --viz-ramp-hi: oklch(0.82 0.13 195);
  --viz-ramp-ink-lo: var(--c-ice);
  --viz-ramp-ink-hi: var(--c-navy);

  /* type */
  --font-body: "Lexend", "Lexend fallback", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --text-base: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --text-lg: clamp(1.1875rem, 1.1rem + 0.35vw, 1.375rem);
  --text-md: 0.9375rem;
  --text-sm: 0.8125rem;
  --text-xs: 0.75rem;
  --text-2xs: 0.6875rem;
  --h1: clamp(2.75rem, 2rem + 4vw, 6rem);
  --h2: clamp(1.75rem, 1.4rem + 1.5vw, 2.75rem);
  --h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --leading-body: 1.6;
  --leading-snug: 1.3;
  --leading-tight: 1.1;
  --measure: 65ch;
  --tracking-heading: -0.02em;
  --tracking-wide: 0.08em;
  --tracking-label: 0.14em;
  --tracking-caps: 0.2em;
  --underline: 1.5px;
  --underline-hover: 2px;
  --underline-offset: 0.2em;
  --strip-label-raster: 96px;
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-strong: 600;
  --weight-bold: 700;

  /* space */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4.5rem;
  --space-3xl: 7rem;
  --gutter: clamp(1rem, 3vw, 2.5rem);
  --tap-min: 44px;
  --logo-size: 36px;
  --icon-size: 20px;
  --hairline: 1px;
  --focus-width: 2px;
  --focus-offset: 3px;
  --blur-s: 8px;
  --blur-m: 12px;
  --blur-l: 16px;

  /* shape */
  --radius-card: 28px;
  --radius-pill: 999px;
  --radius-s: 4px;
  --radius-m: 6px;
  --radius-l: 20px;
  --shadow-1: 0 1px 2px rgb(0 0 0 / .25), 0 8px 24px rgb(0 0 0 / .25);
  --shadow-2: 0 2px 4px rgb(0 0 0 / .3), 0 24px 48px rgb(0 0 0 / .35);

  /* motion */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-fast: 180ms;
  --dur-med: 400ms;
  --dur-slow: 800ms;

  /* page transitions (DESIGN_BRIEF 5.5, 7.1) */
  --vt-morph: 350ms;
  --vt-out: 150ms;
  --vt-in: 250ms;
  --vt-in-delay: 100ms;
  --vt-title-lead: 60ms;
  --vt-dive: 320ms;
  --vt-fade: 150ms;
  --vt-sweep: 600ms;
  --vt-rise: 12px;
  --vt-slide: 16px;
  --vt-dive-scale: 1.6;
  --vt-unfold-scale: 0.97;
  --drift-period: 28s;

  /* teaching masonry (DESIGN_BRIEF 7.2) */
  --masonry-gap: 20px;
  --card-lift: 6px;
  --card-perspective: 900px;
  --dur-spring: 500ms;
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --wave-opacity: .35;

  /* visitor globe (DESIGN_BRIEF 7.4) */
  --globe-size: 82px;
  --globe-size-mobile: 54px;
  --globe-inset: 24px;
  --globe-hover-scale: 1.08;
  --dur-globe: 500ms;
  --globe-scrim: color-mix(in srgb, var(--c-navy) 55%, transparent);

  /* hover previews (DESIGN_BRIEF 7.3) */
  --preview-width: 22rem;
  --preview-shift: 8px;
  --dur-preview: 200ms;
}

:root[data-theme="light"] {
  color-scheme: light;

  --bg: var(--c-paper);
  --bg-raised: color-mix(in srgb, var(--c-navy) 5%, var(--c-paper));
  --text: var(--c-navy);
  --text-strong: var(--c-navy);
  --text-muted: color-mix(in srgb, var(--c-navy) 72%, var(--bg));
  --text-faint: color-mix(in srgb, var(--c-navy) 50%, var(--bg));
  --accent: var(--c-rust);
  --accent-hover: var(--c-ember);
  --accent-2: var(--c-teal-1);
  --link: color-mix(in srgb, var(--c-rust) 75%, var(--c-navy));
  --link-hover: color-mix(in srgb, var(--c-rust) 50%, var(--c-navy));
  --link-line: var(--c-rust);
  --focus: var(--c-rust);
  --line: color-mix(in srgb, var(--c-navy) 14%, transparent);
  --line-strong: color-mix(in srgb, var(--c-navy) 32%, transparent);
  --wash: color-mix(in srgb, var(--c-teal-1) 7%, transparent);
  --wash-strong: color-mix(in srgb, var(--c-teal-1) 16%, transparent);
  --surface: color-mix(in srgb, var(--c-paper) 70%, transparent);
  --bar: color-mix(in srgb, var(--bg) 80%, transparent);
  --scrim: color-mix(in srgb, var(--c-navy) 35%, transparent);
  --globe-scrim: color-mix(in srgb, var(--c-paper) 72%, transparent);
  --tap: color-mix(in srgb, var(--c-teal-1) 14%, transparent);
  --wire: var(--c-teal-1);
  --strip-glow: color-mix(in srgb, var(--c-teal-1) 8%, transparent);
  --name: var(--c-teal-1);
  --label: var(--c-teal-1);
  --label-hover: var(--c-navy);
  --control: var(--c-teal-1);
  --control-ink: var(--c-paper);

  --viz-teal: var(--c-teal-1);
  --viz-dot: var(--c-navy);
  --viz-gold: #9a6410;
  --viz-gold-text: #7a4e08;
  --viz-pass: #0b5e4f;
  --viz-fail: #9b2226;
  --viz-fail-wash: color-mix(in srgb, var(--c-brick) 14%, transparent);
  --viz-node: color-mix(in srgb, var(--c-teal-1) 8%, var(--c-paper));
  --viz-strong: var(--c-navy);
  --viz-ramp-lo: oklch(0.95 0.02 195);
  --viz-ramp-hi: oklch(0.45 0.09 205);
  --viz-ramp-ink-lo: var(--c-navy);
  --viz-ramp-ink-hi: var(--c-paper);
}