/* Stake. The tokens this site is drawn with, cut from its stylesheet at build time.
   Four surfaces, three inks, one flag. Hairlines at 0.5px. Shadows only under media.
   Light on :root, dark under prefers-color-scheme and [data-theme="dark"]. Drop it in; set your fonts on --font-plex-sans / --font-plex-mono.
   https://portfolio-galaxy-co-ai.vercel.app/colophon */

/* Stake, v2. Source of truth: designs/brand.md and designs/stake-tokens.css. Paper on :root, Graphite under the dark query. */
:root {
  color-scheme: light;
  --canvas: #F6F6F4; --sheet: #FFFFFF; --well: #EEEEEB; --cover: #141413; --cover-ink: #EDEDEA;
  --ink: #141413; --ink-2: #5F5F5B; --ink-3: #6F6F6B; --on-flag: #141413;
  --rule: rgba(20, 20, 19, 0.12); --rule-2: rgba(20, 20, 19, 0.28); --grid: rgba(20, 20, 19, 0.07);
  --flag: #F0541E; --flag-text: #B83A0E; --flag-tint: rgba(240, 84, 30, 0.10);
  --active: #176B42; --active-tint: rgba(23, 107, 66, 0.10);
  --shadow-cover: 0 1px 2px rgba(20, 20, 19, 0.08);
  --shadow-media: 0 1px 2px rgba(20, 20, 19, 0.06), 0 24px 48px -24px rgba(20, 20, 19, 0.28);
  --shadow-media-up: 0 2px 4px rgba(20, 20, 19, 0.06), 0 32px 56px -24px rgba(20, 20, 19, 0.34);

  --font-sans: var(--font-plex-sans, "IBM Plex Sans"), system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: var(--font-plex-mono, "IBM Plex Mono"), ui-monospace, "SFMono-Regular", Menlo, monospace;

  --text-display: 112px; --lh-display: 0.98; --ls-display: -0.045em;
  --text-title: 44px; --lh-title: 1.08; --ls-title: -0.025em;
  --text-h2: 32px; --lh-h2: 1.15; --ls-h2: -0.02em;
  --text-heading: 24px; --lh-heading: 1.25; --ls-heading: -0.015em;
  --text-lede: 22px; --lh-lede: 1.45; --text-body: 18px; --lh-body: 1.6; --text-ui: 16px; --lh-ui: 1.5;
  --text-small: 14px; --lh-small: 1.5; --text-label: 11px; --lh-label: 1.3; --ls-label: 0.08em;
  --text-mono: 13px; --lh-mono: 1.5; --text-stamp: 10.5px;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px; --s12: 48px; --s16: 64px; --s20: 80px; --s24: 96px; --s32: 128px;
  --container: 1120px; --measure: 62ch; --pad-x: 16px;
  --radius-well: 14px; --radius-media: 8px; --radius-frame: 8px; --radius-stamp: 3px; --radius-pill: 999px; --hairline: 0.5px;
  --well-pad: 12px;

  --duration-instant: 100ms; --duration-fast: 150ms; --duration-normal: 200ms; --duration-smooth: 300ms; --duration-slow: 500ms; --duration-hero: 800ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1); --ease-enter: cubic-bezier(0, 0, 0, 1); --ease-exit: cubic-bezier(0.3, 0, 1, 1); --ease-emphasized: cubic-bezier(0.05, 0.7, 0.1, 1);
  --travel-sm: 8px; --travel-md: 16px; --travel-lg: 24px; --stagger: 50ms;
}
@media (min-width: 640px) { :root { --pad-x: 24px; --well-pad: 16px; } }
@media (min-width: 1024px) { :root { --pad-x: 32px; --well-pad: 24px; } }
@media (max-width: 1023px) { :root { --text-display: 76px; --text-title: 36px; --text-h2: 28px; } }
@media (max-width: 639px) { :root { --text-display: 52px; --lh-display: 1; --text-title: 32px; --text-h2: 26px; --text-heading: 22px; --text-lede: 19px; --text-body: 17px; } }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --canvas: #141413; --sheet: #1C1C1A; --well: #1A1A18; --cover: #F6F6F4; --cover-ink: #141413;
    --ink: #EDEDEA; --ink-2: #A3A39D; --ink-3: #8A8A86; --on-flag: #141413;
    --rule: rgba(237, 237, 234, 0.14); --rule-2: rgba(237, 237, 234, 0.30); --grid: rgba(237, 237, 234, 0.07);
    --flag: #FF6A33; --flag-text: #FF8A5C; --flag-tint: rgba(255, 106, 51, 0.14);
    --active: #4FBF83; --active-tint: rgba(79, 191, 131, 0.14);
    --shadow-cover: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-media: 0 1px 2px rgba(0, 0, 0, 0.5), 0 24px 48px -24px rgba(0, 0, 0, 0.8);
    --shadow-media-up: 0 2px 4px rgba(0, 0, 0, 0.5), 0 32px 56px -24px rgba(0, 0, 0, 0.9);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --canvas: #141413; --sheet: #1C1C1A; --well: #1A1A18; --cover: #F6F6F4; --cover-ink: #141413;
  --ink: #EDEDEA; --ink-2: #A3A39D; --ink-3: #8A8A86; --on-flag: #141413;
  --rule: rgba(237, 237, 234, 0.14); --rule-2: rgba(237, 237, 234, 0.30); --grid: rgba(237, 237, 234, 0.07);
  --flag: #FF6A33; --flag-text: #FF8A5C; --flag-tint: rgba(255, 106, 51, 0.14);
  --active: #4FBF83; --active-tint: rgba(79, 191, 131, 0.14);
  --shadow-cover: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-media: 0 1px 2px rgba(0, 0, 0, 0.5), 0 24px 48px -24px rgba(0, 0, 0, 0.8);
  --shadow-media-up: 0 2px 4px rgba(0, 0, 0, 0.5), 0 32px 56px -24px rgba(0, 0, 0, 0.9);
}
@media (prefers-reduced-motion: reduce) { :root { --travel-sm: 0px; --travel-md: 0px; --travel-lg: 0px; } }