/* Hibio marketing site — design tokens.
   Trimmed from design-guide/tokens/*.css (colors, typography, space, radius,
   elevation, motion, chain). Semantic aliases only — this file is the
   contract the rest of the site's CSS reads from. */

:root{
  /* Chalk — warm neutral ramp */
  --chalk-00:#FFFFFF;
  --chalk-05:#FBF9F5;
  --chalk-10:#F5F2EC;
  --chalk-20:#EAE5DC;
  --chalk-30:#DCD6CA;
  --chalk-40:#C3BCAD;
  --chalk-50:#A29A8A;
  --chalk-60:#7D7669;
  --chalk-70:#565046;
  --chalk-80:#35312A;
  --chalk-90:#23201B;
  --chalk-95:#1A1815;
  --chalk-99:#100F0D;

  /* Ember */
  --ember-50:#E4622F;
  --ember-bright:#FF8055;

  /* Jade */
  --jade-10:#E4F2ED;
  --jade-50:#2E8A72;
  --jade-60:#22705C;
  --jade-bright:#52C4A5;

  /* Item tints used on this page */
  --tint-clay-ink:#B7573A;
  --tint-apricot-ink:#B07A2B;
  --tint-moss-ink:#5A7F45;
  --tint-sky-ink:#3A6E9E;

  /* Semantic — light */
  --surface-field:var(--chalk-10);
  --surface-card:var(--chalk-00);
  --surface-sunken:var(--chalk-20);
  --surface-veil:rgba(255,255,255,.72);

  --text-primary:#1F1C17;
  --text-secondary:var(--chalk-60);
  --text-tertiary:var(--chalk-50);
  --text-inverse:var(--chalk-05);
  --text-accent:var(--jade-60);
  --text-positive:#175243;

  --border-hairline:rgba(31,28,23,.08);
  --border-subtle:var(--chalk-30);

  --accent:var(--jade-50);
  --accent-hover:var(--jade-60);
  --accent-wash:var(--jade-10);
  --accent-on:#FFFFFF;

  --chain-filled:var(--text-primary);
  --chain-today:var(--jade-50);
  --chain-empty:var(--chalk-20);
  --chain-rest:#9DD3C3;
  --chain-future-stroke:var(--chalk-30);

  /* Typography */
  --font-core:"Schibsted Grotesk","SF Pro Text",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-mono:"Fragment Mono","SF Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --type-eyebrow-size:11px; --type-eyebrow-line:14px; --type-eyebrow-track:.72px;
  --type-headline-size:17px; --type-headline-line:22px;
  --type-title-3-size:18px; --type-title-3-line:23px;
  --type-subhead-size:14px;
  --type-footnote-size:13px; --type-footnote-line:18px;
  --type-caption-size:12px;

  /* Space */
  --screen-gutter:20px;
  --card-pad:16px;
  --card-pad-lg:20px;
  --section-gap:28px;

  /* Radius */
  --radius-sm:8px;
  --radius-md:12px;
  --radius-control:14px;
  --radius-lg:18px;
  --radius-card:20px;
  --radius-full:999px;

  /* Elevation */
  --shadow-rest:0 1px 2px rgba(38,33,25,.055), 0 4px 12px -3px rgba(38,33,25,.08);
  --shadow-float:0 4px 8px rgba(38,33,25,.08), 0 24px 48px -12px rgba(38,33,25,.20);
  --shadow-inset:inset 0 1px 2px rgba(38,33,25,.09);
  --shadow-accent:0 2px 6px rgba(46,138,114,.22), 0 8px 20px -6px rgba(46,138,114,.30);
  --ring-focus:0 0 0 3px rgba(46,138,114,.26);
  --blur-veil:saturate(180%) blur(20px);

  /* Motion */
  --dur-press:130ms; --dur-quick:200ms; --dur-settle:380ms;
  --ease-press:cubic-bezier(.2,.8,.2,1);
  --ease-settle:cubic-bezier(.16,1,.3,1);

  /* Chain */
  --link-w-lg:20px; --link-h-lg:40px; --link-gap-lg:7px;
  --link-w-sm:8px; --link-h-sm:16px; --link-gap-sm:3px;
  --link-radius:var(--radius-full);
}

/* Explicit dark scoping — always dark regardless of visitor preference.
   Used by the "why" band, which stays dark in both light and dark mode. */
[data-theme="dark"]{
  --surface-field:var(--chalk-95);
  --surface-card:var(--chalk-90);
  --surface-sunken:#151310;
  --surface-veil:rgba(26,24,21,.74);

  --text-primary:#F4F1EA;
  --text-secondary:#A8A093;
  --text-tertiary:#7D7669;
  --text-inverse:#1F1C17;
  --text-accent:var(--jade-bright);
  --text-positive:#8ADCC5;

  --border-hairline:rgba(255,255,255,.07);
  --border-subtle:#332F28;

  --accent:var(--jade-bright);
  --accent-hover:#6FD4BA;
  --accent-wash:rgba(82,196,165,.14);
  --accent-on:#12211C;

  --chain-filled:#F4F1EA;
  --chain-today:var(--jade-bright);
  --chain-empty:#332F28;
  --chain-rest:rgba(82,196,165,.5);
  --chain-future-stroke:#474138;

  --tint-clay-ink:#EDA98E;
  --tint-apricot-ink:#EFC48D;
  --tint-moss-ink:#AFC99C;
  --tint-sky-ink:#A2C3DE;

  --shadow-rest:0 1px 0 rgba(255,255,255,.05) inset, 0 0 0 1px rgba(255,255,255,.045), 0 8px 20px -10px rgba(0,0,0,.7);
  --shadow-float:0 1px 0 rgba(255,255,255,.07) inset, 0 0 0 1px rgba(255,255,255,.07), 0 28px 56px -16px rgba(0,0,0,.85);
  --shadow-accent:0 2px 6px rgba(82,196,165,.20), 0 8px 20px -6px rgba(82,196,165,.26);
  --ring-focus:0 0 0 3px rgba(82,196,165,.30);
}

/* System-preference dark mode — applies site-wide when the visitor's OS is
   dark and the page hasn't been pinned to light. The "why" band above always
   wins locally because element-level custom properties beat :root ones. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --surface-field:var(--chalk-95);
    --surface-card:var(--chalk-90);
    --surface-sunken:#151310;
    --surface-veil:rgba(26,24,21,.74);

    --text-primary:#F4F1EA;
    --text-secondary:#A8A093;
    --text-tertiary:#7D7669;
    --text-inverse:#1F1C17;
    --text-accent:var(--jade-bright);
    --text-positive:#8ADCC5;

    --border-hairline:rgba(255,255,255,.07);
    --border-subtle:#332F28;

    --accent:var(--jade-bright);
    --accent-hover:#6FD4BA;
    --accent-wash:rgba(82,196,165,.14);
    --accent-on:#12211C;

    --chain-filled:#F4F1EA;
    --chain-today:var(--jade-bright);
    --chain-empty:#332F28;
    --chain-rest:rgba(82,196,165,.5);
    --chain-future-stroke:#474138;

    --tint-clay-ink:#EDA98E;
    --tint-apricot-ink:#EFC48D;
    --tint-moss-ink:#AFC99C;
    --tint-sky-ink:#A2C3DE;

    --shadow-rest:0 1px 0 rgba(255,255,255,.05) inset, 0 0 0 1px rgba(255,255,255,.045), 0 8px 20px -10px rgba(0,0,0,.7);
    --shadow-float:0 1px 0 rgba(255,255,255,.07) inset, 0 0 0 1px rgba(255,255,255,.07), 0 28px 56px -16px rgba(0,0,0,.85);
    --shadow-accent:0 2px 6px rgba(82,196,165,.20), 0 8px 20px -6px rgba(82,196,165,.26);
    --ring-focus:0 0 0 3px rgba(82,196,165,.30);
  }
}

@media (prefers-reduced-motion: reduce){
  :root{ --dur-press:0ms; --dur-quick:0ms; --dur-settle:0ms; }
}