:root {
  color-scheme: light;
  --colour-canvas: #f4f3ee;
  --colour-surface: #ffffff;
  --colour-surface-raised: #ffffff;
  --colour-surface-soft: #ebeae4;
  --colour-ink: #141517;
  --colour-muted: #5d6065;
  --colour-border: #d8d8d0;
  --colour-border-strong: #85877f;
  --colour-accent: #b9f34a;
  --colour-accent-hover: #a8e239;
  --colour-accent-ink: #223008;
  --colour-accent-ring: rgba(185, 243, 74, 0.11);
  --colour-focus: #4a7110;
  --colour-overlay: rgba(11, 12, 14, 0.72);
  --colour-shadow: rgba(20, 21, 23, 0.11);
  --colour-shadow-strong: rgba(0, 0, 0, 0.42);
  --colour-nav-border: rgba(20, 21, 23, 0.09);
  --colour-nav-background: rgba(255, 255, 255, 0.88);
  --colour-menu-background: rgba(255, 255, 255, 0.97);
  --colour-solid-button-background: #141517;
  --colour-solid-button-text: #f7f7f2;
  --colour-solid-button-hover: #303236;
  --colour-ghost-background: rgba(255, 255, 255, 0.5);
  --colour-grid-line: rgba(20, 21, 23, 0.035);
  --colour-composition: #ebeae4;
  --colour-composition-glow: rgba(185, 243, 74, 0.48);
  --colour-window-border: rgba(20, 21, 23, 0.18);
  --colour-window-bar: #f7f7f3;
  --colour-window-dot: #c7c8c2;
  --colour-mock-body: #eeeee9;
  --colour-floating-surface: rgba(255, 255, 255, 0.9);
  --colour-strip-surface: rgba(255, 255, 255, 0.35);
  --colour-divider-dot: #969890;
  --colour-chip-text: #44474b;
  --colour-chip-surface: #fafaf7;
  --colour-section-tint: #ebeae4;
  --colour-tint-border: #cbccc4;
  --colour-portrait-surface: #dfe0d9;
  --colour-process-border: #c2c3bb;
  --colour-process-surface: rgba(255, 255, 255, 0.35);
  --colour-error-card: rgba(255, 255, 255, 0.92);
  --colour-portrait-label: rgba(23, 25, 28, 0.9);
  --colour-footer-border: #cdcec6;
  --colour-footer-muted: #92969d;
  --colour-link-underline-dark: #55595f;
  --colour-status: #579c16;
  --colour-status-soft: rgba(87, 156, 22, 0.14);
  --colour-status-ring: rgba(87, 156, 22, 0.32);
  --colour-invalid: #a52a2a;
  --colour-invalid-soft: rgba(165, 42, 42, 0.08);

  /* Intentionally dark editorial surfaces shared by both themes. */
  --colour-dark: #17191c;
  --colour-dark-soft: #202328;
  --colour-dark-text: #f7f7f2;
  --colour-dark-body-text: #e2e3df;
  --colour-dark-muted: #b9bcc1;
  --colour-line-dark: #313336;
  --colour-control-border-dark: #666b5e;
  --colour-dark-hover: rgba(255, 255, 255, 0.035);
  --colour-media-badge: rgba(20, 21, 23, 0.85);
  --colour-media-caption: rgba(20, 21, 23, 0.88);
  --colour-dialog-border: #383b40;
  --colour-dialog-bar: rgba(23, 25, 28, 0.94);
  --colour-timeline-text: #d5d6d3;
  --colour-timeline-marker-muted: #75797f;

  /* Interface illustration colours stay purposeful rather than inverted. */
  --colour-admin-surface: #1a1d21;
  --colour-admin-bar: #22252a;
  --colour-admin-border: #34373c;
  --colour-admin-dot: #4b4f55;
  --colour-admin-muted: #8f949b;
  --colour-admin-control: #35383e;
  --colour-admin-panel: #23262b;
  --colour-admin-panel-border: #36393f;
  --colour-admin-row: #292c31;
  --colour-phone-frame: #0d0f11;
  --colour-phone-border: #383b3f;
  --colour-phone-notch: #090a0b;
  --colour-phone-surface-start: #1e2820;
  --colour-phone-surface-end: #111512;
  --colour-phone-muted: #9ca89e;
  --colour-phone-divider: #364039;
  --colour-phone-dot: #4c5650;

  --font-sans: "Manrope", "Segoe UI", Helvetica, Arial, sans-serif;
  --font-serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --step--1: clamp(0.78rem, 0.75rem + 0.13vw, 0.86rem);
  --step-0: clamp(0.96rem, 0.92rem + 0.2vw, 1.08rem);
  --step-1: clamp(1.15rem, 1.04rem + 0.45vw, 1.42rem);
  --step-2: clamp(1.45rem, 1.21rem + 0.95vw, 2rem);
  --step-3: clamp(2rem, 1.54rem + 1.85vw, 3rem);
  --step-4: clamp(2.7rem, 1.9rem + 3.25vw, 4.55rem);
  --step-5: clamp(3.5rem, 2.25rem + 5.2vw, 6.5rem);
  --space-1: 0.5rem;
  --space-2: 0.75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4.5rem;
  --space-8: 7rem;
  --shell: 82rem;
  --gutter: clamp(1.1rem, 4vw, 3.25rem);
  --radius-sm: 0.55rem;
  --radius-md: 1rem;
  --radius-lg: 1.45rem;
  --shadow-nav: 0 12px 38px var(--colour-shadow);
  --shadow-panel: 0 22px 60px var(--colour-shadow);
  --transition-fast: 160ms ease;
  --transition-medium: 320ms cubic-bezier(0.22, 1, 0.36, 1);
  --transition-theme: 220ms ease;
}

[data-theme="light"] {
  color-scheme: light;
}

[data-theme="dark"] {
  color-scheme: dark;
  --colour-canvas: #10110f;
  --colour-surface: #171815;
  --colour-surface-raised: #1d1f1b;
  --colour-surface-soft: #141512;
  --colour-ink: #f4f3ee;
  --colour-muted: #a7aaa3;
  --colour-border: #30332c;
  --colour-border-strong: #686e5f;
  --colour-accent: #b9f34a;
  --colour-accent-hover: #c5f765;
  --colour-accent-ink: #151a0e;
  --colour-focus: #b9f34a;
  --colour-overlay: rgba(5, 6, 5, 0.78);
  --colour-shadow: rgba(0, 0, 0, 0.32);
  --colour-shadow-strong: rgba(0, 0, 0, 0.58);
  --colour-nav-border: rgba(244, 243, 238, 0.1);
  --colour-nav-background: rgba(23, 24, 21, 0.88);
  --colour-menu-background: rgba(23, 24, 21, 0.97);
  --colour-solid-button-background: #f4f3ee;
  --colour-solid-button-text: #151a0e;
  --colour-solid-button-hover: #d9d9d2;
  --colour-ghost-background: rgba(29, 31, 27, 0.58);
  --colour-grid-line: rgba(244, 243, 238, 0.045);
  --colour-composition: #151613;
  --colour-composition-glow: rgba(185, 243, 74, 0.17);
  --colour-window-border: rgba(244, 243, 238, 0.14);
  --colour-window-bar: #20211e;
  --colour-window-dot: #5a5d54;
  --colour-mock-body: #1b1d19;
  --colour-floating-surface: rgba(29, 31, 27, 0.93);
  --colour-strip-surface: rgba(23, 24, 21, 0.55);
  --colour-divider-dot: #62665c;
  --colour-chip-text: #d7d9d2;
  --colour-chip-surface: #1d1f1b;
  --colour-section-tint: #141512;
  --colour-tint-border: #30332c;
  --colour-portrait-surface: #1d1f1b;
  --colour-process-border: #464a40;
  --colour-process-surface: rgba(29, 31, 27, 0.72);
  --colour-error-card: rgba(23, 24, 21, 0.95);
  --colour-footer-border: #30332c;
  --colour-footer-muted: #a7aaa3;
  --colour-link-underline-dark: #666b5e;
  --colour-status: #9bd94d;
  --colour-status-soft: rgba(155, 217, 77, 0.16);
  --colour-status-ring: rgba(155, 217, 77, 0.38);
  --colour-invalid: #ff9c91;
  --colour-invalid-soft: rgba(255, 156, 145, 0.1);
  --colour-dark: #171815;
  --colour-dark-soft: #1d1f1b;
  --colour-dark-text: #f4f3ee;
  --colour-dark-body-text: #dedfd9;
  --colour-dark-muted: #aeb1a9;
  --colour-line-dark: #3b3f37;
  --colour-control-border-dark: #666b5e;
  --colour-dialog-border: #464a40;
  --colour-dialog-bar: rgba(23, 24, 21, 0.94);
}

/* With JavaScript disabled, the operating-system preference remains authoritative. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    color-scheme: dark;
    --colour-canvas: #10110f;
    --colour-surface: #171815;
    --colour-surface-raised: #1d1f1b;
    --colour-surface-soft: #141512;
    --colour-ink: #f4f3ee;
    --colour-muted: #a7aaa3;
    --colour-border: #30332c;
    --colour-border-strong: #686e5f;
    --colour-accent-hover: #c5f765;
    --colour-accent-ink: #151a0e;
    --colour-focus: #b9f34a;
    --colour-overlay: rgba(5, 6, 5, 0.78);
    --colour-shadow: rgba(0, 0, 0, 0.32);
    --colour-shadow-strong: rgba(0, 0, 0, 0.58);
    --colour-nav-border: rgba(244, 243, 238, 0.1);
    --colour-nav-background: rgba(23, 24, 21, 0.88);
    --colour-menu-background: rgba(23, 24, 21, 0.97);
    --colour-solid-button-background: #f4f3ee;
    --colour-solid-button-text: #151a0e;
    --colour-solid-button-hover: #d9d9d2;
    --colour-ghost-background: rgba(29, 31, 27, 0.58);
    --colour-grid-line: rgba(244, 243, 238, 0.045);
    --colour-composition: #151613;
    --colour-composition-glow: rgba(185, 243, 74, 0.17);
    --colour-window-border: rgba(244, 243, 238, 0.14);
    --colour-window-bar: #20211e;
    --colour-window-dot: #5a5d54;
    --colour-mock-body: #1b1d19;
    --colour-floating-surface: rgba(29, 31, 27, 0.93);
    --colour-strip-surface: rgba(23, 24, 21, 0.55);
    --colour-divider-dot: #62665c;
    --colour-chip-text: #d7d9d2;
    --colour-chip-surface: #1d1f1b;
    --colour-section-tint: #141512;
    --colour-tint-border: #30332c;
    --colour-portrait-surface: #1d1f1b;
    --colour-process-border: #464a40;
    --colour-process-surface: rgba(29, 31, 27, 0.72);
    --colour-error-card: rgba(23, 24, 21, 0.95);
    --colour-footer-border: #30332c;
    --colour-footer-muted: #a7aaa3;
    --colour-link-underline-dark: #666b5e;
    --colour-status: #9bd94d;
    --colour-status-soft: rgba(155, 217, 77, 0.16);
    --colour-status-ring: rgba(155, 217, 77, 0.38);
    --colour-invalid: #ff9c91;
    --colour-invalid-soft: rgba(255, 156, 145, 0.1);
    --colour-dark: #171815;
    --colour-dark-soft: #1d1f1b;
    --colour-dark-text: #f4f3ee;
    --colour-dark-body-text: #dedfd9;
    --colour-dark-muted: #aeb1a9;
    --colour-line-dark: #3b3f37;
    --colour-control-border-dark: #666b5e;
    --colour-dialog-border: #464a40;
    --colour-dialog-bar: rgba(23, 24, 21, 0.94);
  }
}