/* 1. @property registrations for the 17 semantic colour tokens */
@property --color-surface { syntax: "<color>"; inherits: true; initial-value: #282828; }
@property --color-surface-raised { syntax: "<color>"; inherits: true; initial-value: #32302f; }
@property --color-text { syntax: "<color>"; inherits: true; initial-value: #ebdbb2; }
@property --color-text-muted { syntax: "<color>"; inherits: true; initial-value: #a89984; }
@property --color-line { syntax: "<color>"; inherits: true; initial-value: #504945; }
@property --color-accent { syntax: "<color>"; inherits: true; initial-value: #b8bb26; }
@property --color-prompt { syntax: "<color>"; inherits: true; initial-value: #83a598; }
@property --color-cursor { syntax: "<color>"; inherits: true; initial-value: #b8bb26; }
@property --color-link { syntax: "<color>"; inherits: true; initial-value: #b8bb26; }
@property --color-selection { syntax: "<color>"; inherits: true; initial-value: #32302f; }
@property --color-status-bg { syntax: "<color>"; inherits: true; initial-value: #b8bb26; }
@property --color-status-fg { syntax: "<color>"; inherits: true; initial-value: #282828; }
@property --hue-green { syntax: "<color>"; inherits: true; initial-value: #b8bb26; }
@property --hue-yellow { syntax: "<color>"; inherits: true; initial-value: #fabd2f; }
@property --hue-blue { syntax: "<color>"; inherits: true; initial-value: #83a598; }
@property --hue-orange { syntax: "<color>"; inherits: true; initial-value: #fe8019; }
@property --hue-pink { syntax: "<color>"; inherits: true; initial-value: #d3869b; }

/* 2. Root: primitives, gruvbox-dark semantic tokens, component tokens */
:root {
  color-scheme: dark;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --type-size-xs: 12px;
  --type-size-sm: 13px;
  --type-size-base: 14px;
  --type-size-md: 16px;
  --type-size-lg: 18px;
  --type-size-xl: 22px;
  --type-size-2xl: 28px;
  --type-size-3xl: 40px;
  --type-leading-tight: 1.15;
  --type-leading-body: 1.6;
  --type-measure: 42rem;
  --font-sans: Geist, system-ui, -apple-system, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --motion-fast: 120ms;
  --motion-switch: 400ms;
  --brand-tile: #1f1f1f;
  --brand-mark: #ffffff;
  --color-surface: #282828;
  --color-surface-raised: #32302f;
  --color-text: #ebdbb2;
  --color-text-muted: #a89984;
  --color-line: #504945;
  --color-accent: #b8bb26;
  --color-prompt: #83a598;
  --color-cursor: #b8bb26;
  --color-link: #b8bb26;
  --color-selection: #32302f;
  --color-status-bg: #b8bb26;
  --color-status-fg: #282828;
  --hue-green: #b8bb26;
  --hue-yellow: #fabd2f;
  --hue-blue: #83a598;
  --hue-orange: #fe8019;
  --hue-pink: #d3869b;
  --nav-mark-bg: var(--color-text);
  --nav-mark-fg: var(--color-surface);
  --prompt-user: var(--color-prompt);
  --prompt-path: var(--color-text-muted);
  --post-list-date: var(--color-text-muted);
  --post-list-tag: var(--color-accent);
  --post-list-hover-bg: var(--color-surface-raised);
  --status-bar-bg: var(--color-surface-raised);
  --status-bar-fg: var(--color-text-muted);
  --status-bar-active-bg: var(--color-status-bg);
  --status-bar-active-fg: var(--color-status-fg);
  --code-bg: var(--color-surface-raised);
  --code-fg: var(--color-text);
  --diff-add: var(--hue-green);
  --diff-remove: var(--hue-pink);
  --section-writing: var(--hue-green);
  --section-lab: var(--hue-pink);
  --section-talks: var(--hue-blue);
  --section-about: var(--hue-yellow);
  --section-home: var(--hue-yellow);
  --section-tokens: var(--color-accent);
  --section-notfound: var(--color-accent);
}

/* 3. Non-default dark themes */
:root[data-theme="monokai-pro"] {
  --color-surface: #2d2a2e;
  --color-surface-raised: #363437;
  --color-text: #fcfcfa;
  --color-text-muted: #a6a4a8;
  --color-line: #5b595c;
  --color-accent: #a9dc76;
  --color-prompt: #fc9867;
  --color-cursor: #a9dc76;
  --color-link: #a9dc76;
  --color-selection: #363437;
  --color-status-bg: #a9dc76;
  --color-status-fg: #2d2a2e;
  --hue-green: #a9dc76;
  --hue-yellow: #ffd866;
  --hue-blue: #78dce8;
  --hue-orange: #fc9867;
  --hue-pink: #ff6a8f;
}
:root[data-theme="solarized-dark"] {
  --color-surface: #002b36;
  --color-surface-raised: #073642;
  --color-text: #eee8d5;
  --color-text-muted: #93a1a1;
  --color-line: #3b5660;
  --color-accent: #3ba9a0;
  --color-prompt: #93a1a1;
  --color-cursor: #3ba9a0;
  --color-link: #3ba9a0;
  --color-selection: #073642;
  --color-status-bg: #3ba9a0;
  --color-status-fg: #002b36;
  --hue-green: #9bb000;
  --hue-yellow: #c9a000;
  --hue-blue: #4ea6e8;
  --hue-orange: #e37e4e;
  --hue-pink: #e472a8;
}
:root[data-theme="mono"] {
  --color-surface: #000000;
  --color-surface-raised: #111111;
  --color-text: #ffffff;
  --color-text-muted: #a3a3a3;
  --color-line: #3a3a3a;
  --color-accent: #ffffff;
  --color-prompt: #ffffff;
  --color-cursor: #ffffff;
  --color-link: #ffffff;
  --color-selection: #111111;
  --color-status-bg: #ffffff;
  --color-status-fg: #000000;
  --hue-green: #ffffff;
  --hue-yellow: #ffffff;
  --hue-blue: #ffffff;
  --hue-orange: #ffffff;
  --hue-pink: #ffffff;
}
:root[data-theme="phosphor"] {
  --color-surface: #0a0e0b;
  --color-surface-raised: #101812;
  --color-text: #d6e0d7;
  --color-text-muted: #93a698;
  --color-line: #2a3a2e;
  --color-accent: #8fd19e;
  --color-prompt: #8fd19e;
  --color-cursor: #8fd19e;
  --color-link: #8fd19e;
  --color-selection: #101812;
  --color-status-bg: #8fd19e;
  --color-status-fg: #0a0e0b;
  --hue-green: #8fd19e;
  --hue-yellow: #d9d48a;
  --hue-blue: #8fbfd1;
  --hue-orange: #d9a56b;
  --hue-pink: #d18fb8;
}
:root[data-theme="amber"] {
  --color-surface: #130f0a;
  --color-surface-raised: #1b150e;
  --color-text: #eadfcd;
  --color-text-muted: #ab9980;
  --color-line: #3d3122;
  --color-accent: #e9a94c;
  --color-prompt: #e9a94c;
  --color-cursor: #e9a94c;
  --color-link: #e9a94c;
  --color-selection: #1b150e;
  --color-status-bg: #e9a94c;
  --color-status-fg: #130f0a;
  --hue-green: #a9c47a;
  --hue-yellow: #e9a94c;
  --hue-blue: #8fb0c9;
  --hue-orange: #e07a3a;
  --hue-pink: #d98a9a;
}
:root[data-theme="midnight"] {
  --color-surface: #15171f;
  --color-surface-raised: #1b1e29;
  --color-text: #dfe3ee;
  --color-text-muted: #9aa2bd;
  --color-line: #363c52;
  --color-accent: #8ab4f8;
  --color-prompt: #8ab4f8;
  --color-cursor: #8ab4f8;
  --color-link: #8ab4f8;
  --color-selection: #1b1e29;
  --color-status-bg: #8ab4f8;
  --color-status-fg: #15171f;
  --hue-green: #8fd19e;
  --hue-yellow: #e5c07b;
  --hue-blue: #8ab4f8;
  --hue-orange: #f0a36b;
  --hue-pink: #e39ac0;
}
:root[data-theme="ansi"] {
  --color-surface: #101114;
  --color-surface-raised: #17181d;
  --color-text: #e6e6e3;
  --color-text-muted: #9a9da8;
  --color-line: #34363f;
  --color-accent: #98c379;
  --color-prompt: #61afef;
  --color-cursor: #98c379;
  --color-link: #98c379;
  --color-selection: #17181d;
  --color-status-bg: #98c379;
  --color-status-fg: #101114;
  --hue-green: #98c379;
  --hue-yellow: #e5c07b;
  --hue-blue: #61afef;
  --hue-orange: #d19a66;
  --hue-pink: #e06c75;
}

/* 4. Light mode (paper) */
:root[data-mode="light"] {
  color-scheme: light;
  --color-surface: #f4f3ee;
  --color-surface-raised: #ebe9e1;
  --color-text: #1c1c1a;
  --color-text-muted: #5c5c57;
  --color-line: #b9b7ad;
  --color-accent: #1f5e5a;
  --color-prompt: #2b5f8f;
  --color-cursor: #1f5e5a;
  --color-link: #1f5e5a;
  --color-selection: #ebe9e1;
  --color-status-bg: #1f5e5a;
  --color-status-fg: #f4f3ee;
  --hue-green: #2f6b3a;
  --hue-yellow: #7a5800;
  --hue-blue: #2b5f8f;
  --hue-orange: #9c4a22;
  --hue-pink: #a1385f;
}

/* 5. System mode, light preference (paper) */
@media (prefers-color-scheme: light) {
  :root[data-mode="system"] {
    color-scheme: light;
    --color-surface: #f4f3ee;
    --color-surface-raised: #ebe9e1;
    --color-text: #1c1c1a;
    --color-text-muted: #5c5c57;
    --color-line: #b9b7ad;
    --color-accent: #1f5e5a;
    --color-prompt: #2b5f8f;
    --color-cursor: #1f5e5a;
    --color-link: #1f5e5a;
    --color-selection: #ebe9e1;
    --color-status-bg: #1f5e5a;
    --color-status-fg: #f4f3ee;
    --hue-green: #2f6b3a;
    --hue-yellow: #7a5800;
    --hue-blue: #2b5f8f;
    --hue-orange: #9c4a22;
    --hue-pink: #a1385f;
  }
}

/* 6. Section tints off */
:root[data-tints="off"] {
  --section-home: var(--hue-yellow);
  --section-writing: var(--hue-yellow);
  --section-lab: var(--hue-yellow);
  --section-talks: var(--hue-yellow);
  --section-about: var(--hue-yellow);
  --section-tokens: var(--hue-yellow);
  --section-notfound: var(--hue-yellow);
}

/* 7. Per-section tint */
:root[data-section="home"] { --section-tint: var(--section-home); }
:root[data-section="writing"] { --section-tint: var(--section-writing); }
:root[data-section="lab"] { --section-tint: var(--section-lab); }
:root[data-section="talks"] { --section-tint: var(--section-talks); }
:root[data-section="about"] { --section-tint: var(--section-about); }
:root[data-section="tokens"] { --section-tint: var(--section-tokens); }
:root[data-section="notfound"] { --section-tint: var(--section-notfound); }

/* 8. Theme switching transition */
:root[data-switching] {
  transition: --color-surface var(--motion-switch), --color-surface-raised var(--motion-switch), --color-text var(--motion-switch), --color-text-muted var(--motion-switch), --color-line var(--motion-switch), --color-accent var(--motion-switch), --color-prompt var(--motion-switch), --color-cursor var(--motion-switch), --color-link var(--motion-switch), --color-selection var(--motion-switch), --color-status-bg var(--motion-switch), --color-status-fg var(--motion-switch), --hue-green var(--motion-switch), --hue-yellow var(--motion-switch), --hue-blue var(--motion-switch), --hue-orange var(--motion-switch), --hue-pink var(--motion-switch);
}
@media (prefers-reduced-motion: reduce) { :root[data-switching] { transition: none } }