/* © 2026 Created with ♥ by Alex Munteanu | alexmunteanu.com */
/* Folio design tokens - the single source of truth every Courses surface inherits.
   Dark is the default (:root). Light is a derived, AA-checked override.
   Surface CSS (gallery.css, agile styles.css) must consume these via var(--…),
   never re-declare Folio hex values. */

@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500&display=swap");

/* ---------- Dark (default) - verbatim Folio bundle values ---------- */
:root {
  /* Native UA controls (form popups, scrollbars, radios) follow the theme. */
  color-scheme: dark;
  /* color */
  --color-bg:#101013;--color-surface:rgba(255,255,255,.03);--color-bg-sunken:rgba(255,255,255,.05);--color-bg-soft:rgba(255,255,255,.03);
  --color-text:rgba(255,255,255,.92);--color-text-muted:rgba(255,255,255,.62);--color-text-faint:rgba(255,255,255,.4);--color-text-ghost:rgba(255,255,255,.28);
  --color-ghost-numeral:rgba(255,255,255,.045);
  --color-brand:#7FD4B4;--color-brand-strong:#9FE2C8;--color-brand-soft:rgba(127,212,180,.14);
  --color-accent:#7FD4B4;
  --color-border:rgba(255,255,255,.08);--color-border-strong:rgba(255,255,255,.14);
  --color-heart:#E05C5C;
  --color-on-brand:#101013;
  --callout-tip:var(--color-accent);--callout-warn:var(--color-accent);--callout-danger:var(--color-accent);--callout-note:var(--color-accent);--callout-example:var(--color-accent);
  --callout-bg:rgba(255,255,255,.03);
  --level-newbie:rgba(255,255,255,.4);--level-intermediate:rgba(255,255,255,.4);--level-pro:rgba(255,255,255,.4);
  --surface-card:var(--color-surface);--text-body:var(--color-text);--text-secondary:var(--color-text-muted);--text-meta:var(--color-text-faint);--link:var(--color-text-muted);--link-hover:var(--color-text);--focus-ring:var(--color-brand-soft);

  /* typography */
  --font-display:"Space Grotesk","Helvetica Neue",sans-serif;
  --font-body:"Geist","Helvetica Neue",sans-serif;
  --font-mono:"Geist Mono","SFMono-Regular",monospace;
  --text-11:11px;--text-12:12px;--text-13:13px;--text-14:14px;--text-16:16px;--text-19:19px;--text-22:22px;--text-28:28px;--text-34:34px;
  --text-page-title:clamp(38px,6vw,60px);
  --text-hero:clamp(48px,8vw,84px);
  --leading-body:1.75;--leading-heading:1.05;
  --tracking-heading:-0.02em;--tracking-eyebrow:.12em;
  --measure-reading:62ch;

  /* spacing + radii */
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-6:24px;--space-8:32px;--space-12:48px;--space-16:64px;--space-24:96px;
  --radius-sm:8px;--radius-md:10px;--radius-pill:999px;
  --page-pad:clamp(24px,4vw,64px);--reading-wide:900px;--top-progress-h:3px;

  /* elevation (hairlines only - shadows reserved for overlays) */
  --shadow-sm:none;
  --shadow-lg:0 12px 60px rgba(0,0,0,.35);

  /* motion */
  --ease-out:cubic-bezier(.16,1,.3,1);
  --dur-fast:160ms;
  --dur-base:200ms;
}

/* ---------- Light - derived Folio palette (AA on bg #f7f6f3) ---------- */
:root[data-theme="light"] {
  color-scheme: light;
  --color-bg:#f7f6f3;--color-surface:rgba(0,0,0,.03);--color-bg-sunken:rgba(0,0,0,.05);--color-bg-soft:rgba(0,0,0,.03);
  --color-text:rgba(0,0,0,.88);--color-text-muted:rgba(0,0,0,.62);--color-text-faint:rgba(0,0,0,.55);--color-text-ghost:rgba(0,0,0,.32);
  --color-ghost-numeral:rgba(0,0,0,.05);
  --color-brand:#0E7A5B;--color-brand-strong:#0A6349;--color-brand-soft:rgba(14,122,91,.16);
  --color-accent:#0E7A5B;
  --color-border:rgba(0,0,0,.12);--color-border-strong:rgba(0,0,0,.20);
  --color-heart:#CC3333;
  --color-on-brand:#fff;
  --callout-bg:rgba(0,0,0,.03);
  --level-newbie:rgba(0,0,0,.55);--level-intermediate:rgba(0,0,0,.55);--level-pro:rgba(0,0,0,.55);
}