/* Generated by scripts/sync-portfolio-theme.mjs; source design-system/tokens.css. */
/* July 2026 personal website system, v1.0.0.
 * Source: 2026-07-29_v1.0.0/app/globals.css.
 * Primitives are immutable; components consume semantic roles.
 */
:root {
  --portfolio-navy-950: #04101f;
  --portfolio-navy-900: #081a33;
  --portfolio-navy-800: #0d2748;
  --portfolio-navy-700: #17385f;
  --portfolio-ink: #05070b;
  --portfolio-paper: #f5f0e7;
  --portfolio-paper-muted: #c8c8c4;
  --portfolio-gold: #d9ad59;
  --portfolio-gold-soft: #f0d48d;
  --portfolio-pink: #ff5c91;
  --portfolio-pink-deep: #d93f76;
  --portfolio-line: rgba(245, 240, 231, 0.18);
  --portfolio-light-panel: #ebe5d9;
  --portfolio-light-raised: #ffffff;
  --portfolio-gold-ink: #795219;
  --portfolio-pink-ink: #a82556;

  --portfolio-display: "Iowan Old Style", "Baskerville", "Times New Roman", serif;
  --portfolio-sans: "Avenir Next", "Helvetica Neue", "Segoe UI", sans-serif;
  --portfolio-mono: "SFMono-Regular", "Cascadia Code", "Roboto Mono", monospace;
  --portfolio-type-display: clamp(68px, 7vw, 96px);
  --portfolio-type-page-title: clamp(48px, 5.7vw, 82px);
  --portfolio-type-section-title: clamp(32px, 3.5vw, 48px);
  --portfolio-type-quote: clamp(21px, 1.75vw, 27px);
  --portfolio-type-body: 16px;
  --portfolio-type-label: 11px;
  --portfolio-leading-body: 1.6;
  --portfolio-leading-reading: 1.75;
  --portfolio-leading-display: 0.9;
  --portfolio-tracking-display: -0.04em;
  --portfolio-tracking-label: 0.17em;

  --portfolio-space-1: 4px;
  --portfolio-space-2: 8px;
  --portfolio-space-3: 12px;
  --portfolio-space-4: 16px;
  --portfolio-space-5: 20px;
  --portfolio-space-6: 24px;
  --portfolio-space-7: 28px;
  --portfolio-space-8: 38px;
  --portfolio-space-9: 48px;
  --portfolio-space-10: 72px;
  --portfolio-sidebar-width: 292px;
  --portfolio-sidebar-collapsed: 92px;
  --portfolio-mobile-header-height: 72px;
  --portfolio-touch-target: 44px;
  --portfolio-button-height: 52px;
  --portfolio-page-gutter: clamp(32px, 6vw, 90px);
  --portfolio-section-gutter: clamp(32px, 6vw, 90px);
  --portfolio-section-space: clamp(86px, 10vw, 148px);
  --portfolio-measure-reading: 72ch;
  --portfolio-radius-control: 0;
  --portfolio-radius-round: 50%;

  --portfolio-duration-fast: 160ms;
  --portfolio-duration-turn: 180ms;
  --portfolio-duration-overlay: 220ms;
  --portfolio-duration-shell: 260ms;
  --portfolio-ease-standard: ease;
  --portfolio-shadow-portrait: 18px 18px 0 var(--portfolio-pink-deep);
  --portfolio-shadow-testimonial: 14px 14px 0 var(--portfolio-gold);
  --portfolio-shadow-navigation: 22px 0 60px rgba(0, 0, 0, 0.4);

  color-scheme: dark;
  --portfolio-surface-page: var(--portfolio-navy-950);
  --portfolio-surface-panel: var(--portfolio-navy-900);
  --portfolio-surface-raised: var(--portfolio-navy-800);
  --portfolio-surface-inverse: var(--portfolio-paper);
  --portfolio-surface-scrim: rgba(0, 0, 0, 0.6);
  --portfolio-text-primary: var(--portfolio-paper);
  --portfolio-text-secondary: var(--portfolio-paper-muted);
  --portfolio-text-inverse: var(--portfolio-navy-950);
  --portfolio-text-on-accent: var(--portfolio-ink);
  --portfolio-text-accent: var(--portfolio-gold-soft);
  --portfolio-text-expressive: var(--portfolio-pink);
  --portfolio-border: var(--portfolio-line);
  --portfolio-border-strong: rgba(217, 173, 89, 0.42);
  --portfolio-accent: var(--portfolio-gold);
  --portfolio-accent-hover: var(--portfolio-gold-soft);
  --portfolio-expressive: var(--portfolio-pink);
  --portfolio-focus: var(--portfolio-gold-soft);
}

/* An explicit preference selects light mode. The July dark theme is default,
 * including without JavaScript. A consumer may resolve its own system setting.
 */
html[data-theme="light"] {
  color-scheme: light;
  --portfolio-surface-page: var(--portfolio-paper);
  --portfolio-surface-panel: var(--portfolio-light-panel);
  --portfolio-surface-raised: var(--portfolio-light-raised);
  --portfolio-surface-inverse: var(--portfolio-navy-950);
  --portfolio-surface-scrim: rgba(4, 16, 31, 0.44);
  --portfolio-text-primary: var(--portfolio-navy-950);
  --portfolio-text-secondary: var(--portfolio-navy-700);
  --portfolio-text-inverse: var(--portfolio-paper);
  --portfolio-text-on-accent: var(--portfolio-ink);
  --portfolio-text-accent: var(--portfolio-gold-ink);
  --portfolio-text-expressive: var(--portfolio-pink-ink);
  --portfolio-border: rgba(4, 16, 31, 0.2);
  --portfolio-border-strong: rgba(4, 16, 31, 0.46);
  --portfolio-accent: var(--portfolio-gold);
  --portfolio-accent-hover: var(--portfolio-gold-soft);
  --portfolio-expressive: var(--portfolio-pink-deep);
  --portfolio-focus: var(--portfolio-navy-700);
}

/* Device appearance also works before hydration and without JavaScript. */
@media (prefers-color-scheme: light) {
  html:not([data-theme]) {
  color-scheme: light;
  --portfolio-surface-page: var(--portfolio-paper);
  --portfolio-surface-panel: var(--portfolio-light-panel);
  --portfolio-surface-raised: var(--portfolio-light-raised);
  --portfolio-surface-inverse: var(--portfolio-navy-950);
  --portfolio-surface-scrim: rgba(4, 16, 31, 0.44);
  --portfolio-text-primary: var(--portfolio-navy-950);
  --portfolio-text-secondary: var(--portfolio-navy-700);
  --portfolio-text-inverse: var(--portfolio-paper);
  --portfolio-text-on-accent: var(--portfolio-ink);
  --portfolio-text-accent: var(--portfolio-gold-ink);
  --portfolio-text-expressive: var(--portfolio-pink-ink);
  --portfolio-border: rgba(4, 16, 31, 0.2);
  --portfolio-border-strong: rgba(4, 16, 31, 0.46);
  --portfolio-accent: var(--portfolio-gold);
  --portfolio-accent-hover: var(--portfolio-gold-soft);
  --portfolio-expressive: var(--portfolio-pink-deep);
  --portfolio-focus: var(--portfolio-navy-700);
  }
}