/* Semantic color sheet. Dark is the live brand. Light is Figma Home / Pricing.
   Rollback: python3 archive/pre-theme-v1/restore.py */

html {
  --frame-gutter: 0.5rem;
  --content-pad: 1.15rem;
  --nav-offset: 5rem;
  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --shadow-5xl: 0 50px 100px -20px rgb(0 0 0 / 0.6);
  scroll-padding-top: calc(var(--nav-offset) - 1px);
}

/* Any subtree can isolate: data-theme="light" | "dark" on that node.
   Theater chrome follows the page. .restco (the site inside it) is always light.
   .intro / manifesto stays dark. */
html:not([data-theme]),
[data-theme="dark"],
.intro,
.intro[data-theme] {
  color-scheme: dark;
  --colors-saffron-gold: #f4c430;
  --colors-brand: var(--colors-saffron-gold);
  --color-text-link: var(--colors-saffron-gold);
  --color-text-link-hover: var(--colors-zesty-mandarin, #ff6b1a);
  --color-link: var(--color-text-link);
  --color-link-hover: var(--color-text-link-hover);
  --colors-text-accent: var(--color-white);
  --colors-text-default: color-mix(in srgb, var(--color-white) 80%, transparent);
  --colors-text-muted: color-mix(in srgb, var(--color-white) 50%, transparent);
  --color-text: var(--color-white);
  --color-text-muted: var(--colors-text-muted);
  --color-link-muted: var(--colors-text-muted);
  --color-on-brand: var(--color-zinc-950);
  --color-surface-1: var(--color-black);
  --color-surface-2: var(--color-neutral-900);
  --color-surface-3: var(--color-neutral-800);
  --frame-line: color-mix(in srgb, var(--color-white) 14%, transparent);
  --color-wash: color-mix(in srgb, var(--color-white) 2%, transparent);
  --color-wash-strong: color-mix(in srgb, var(--color-white) 6%, transparent);
  --color-hatch: color-mix(in srgb, var(--color-white) 8%, transparent);
  --color-page: var(--color-zinc-950);
  --color-page-band: var(--color-black);
  --color-panel: var(--color-zinc-900);
  --color-panel-border: color-mix(in srgb, var(--color-white) 8%, transparent);
  --color-shadow: color-mix(in srgb, var(--color-black) 45%, transparent);
  --color-nav: var(--color-page-band);
  --color-nav-frost: color-mix(in srgb, var(--color-zinc-950) 72%, transparent);
  --color-ink: var(--colors-text-accent);
  --color-ink-soft: var(--colors-text-default);
  --color-ink-muted: var(--colors-text-muted);
  --th-text: var(--colors-text-default);
  --th-text-muted: var(--colors-text-muted);
  --th-text-accent: var(--colors-text-accent);
  --th-brand: var(--colors-brand);
  --th-line: var(--color-surface-2);
  --th-faint: var(--colors-text-muted);
  --th-muted: var(--colors-text-muted);
  --th-accent: var(--colors-brand);
  --th-mandarin: var(--colors-zesty-mandarin);
  --th-wash: var(--color-wash);
  --th-wash-strong: var(--color-wash-strong);
}

[data-theme="light"],
.restco,
.restco[data-theme] {
  color-scheme: light;
  --color-text-link: var(--color-amber-600);
  --color-text-link-hover: var(--colors-zesty-mandarin, #ff6b1a);
  --color-link: var(--color-text-link);
  --color-link-hover: var(--color-text-link-hover);
  --colors-text-accent: var(--color-zinc-950);
  --colors-text-default: var(--color-zinc-700);
  --colors-text-muted: var(--color-zinc-500);
  --color-text: var(--color-zinc-950);
  --color-text-muted: var(--color-zinc-500);
  --color-link-muted: var(--color-zinc-500);
  --color-on-brand: var(--color-zinc-950);
  --color-surface-1: var(--color-zinc-50);
  --color-surface-2: var(--color-zinc-200);
  --color-surface-3: var(--color-white);
  --frame-line: var(--color-zinc-300);
  --color-wash: color-mix(in srgb, var(--color-zinc-950) 4%, transparent);
  --color-wash-strong: color-mix(in srgb, var(--color-zinc-950) 8%, transparent);
  --color-hatch: color-mix(in srgb, var(--color-zinc-950) 10%, transparent);
  --color-page: var(--color-zinc-200);
  --color-page-band: var(--color-zinc-50);
  --color-panel: var(--color-white);
  --color-panel-border: var(--color-zinc-200);
  --color-shadow: color-mix(in srgb, var(--color-zinc-950) 12%, transparent);
  --color-nav: var(--color-white);
  --color-nav-frost: var(--color-white);
  --color-ink: var(--colors-text-accent);
  --color-ink-soft: var(--colors-text-default);
  --color-ink-muted: var(--colors-text-muted);
  --th-text: var(--colors-text-default);
  --th-text-muted: var(--colors-text-muted);
  --th-text-accent: var(--colors-text-accent);
  --th-brand: var(--colors-brand);
  --th-line: var(--color-surface-2);
  --th-faint: var(--colors-text-muted);
  --th-muted: var(--colors-text-muted);
  --th-accent: var(--colors-brand);
  --th-mandarin: var(--colors-zesty-mandarin);
  --th-wash: var(--color-wash);
  --th-wash-strong: var(--color-wash-strong);
}

@media screen and (min-width: 48rem) {
  html {
    --frame-gutter: 2.5rem;
    --content-pad: 2rem;
  }
}

@media screen and (min-width: 90rem) {
  html {
    --frame-gutter: max(2.5rem, calc((100vw - 86rem) / 2));
  }
}

.theme-toggle {
  box-sizing: border-box;
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  margin: 0;
  padding: 0;
  border: 1px solid var(--frame-line);
  border-radius: 0.5rem;
  background: transparent;
  color: var(--colors-saffron-gold, #f4c430);
  cursor: pointer;
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
  color: var(--colors-zesty-mandarin, #ff6b1a);
  background: var(--color-wash-strong);
}

.theme-toggle svg {
  width: 1.125rem;
  height: 1.125rem;
}

html[data-theme="dark"] .theme-toggle__moon,
html[data-theme="light"] .theme-toggle__sun {
  display: none;
}