:root {
  color-scheme: dark;

  /* Primitives inspired by the supplied monochrome logo and dark reference. */
  --p-black: #050505;
  --p-charcoal: #111113;
  --p-panel: #191a1d;
  --p-frame: #303135;
  --p-white: #f5f5f3;
  --p-gray-300: #c9c9c9;
  --p-gray-500: #929295;
  --p-gray-700: #56565a;
  --p-font: "Aptos", "Segoe UI Variable", "Segoe UI", Arial, sans-serif;
  --p-font-display: "Aptos Display", "Segoe UI Variable Display", "Segoe UI", Arial, sans-serif;
  --p-weight-regular: 400;
  --p-weight-medium: 550;
  --p-weight-bold: 700;
  --p-size-caption: 0.75rem;
  --p-size-small: 0.875rem;
  --p-size-body: 1rem;
  --p-size-heading: clamp(2.35rem, 5vw, 4.6rem);
  --p-size-display: clamp(3.3rem, 9vw, 8rem);
  --p-leading-body: 1.65;
  --p-leading-heading: 0.98;
  --p-track-display: -0.06em;
  --p-space-1: 0.25rem;
  --p-space-2: 0.5rem;
  --p-space-3: 0.75rem;
  --p-space-4: 1rem;
  --p-space-6: 1.5rem;
  --p-space-8: 2rem;
  --p-space-12: 3rem;
  --p-space-16: 4rem;
  --p-space-24: 6rem;
  --p-space-32: 8rem;
  --p-content-width: 78rem;
  --p-gutter: clamp(1.25rem, 5.5vw, 5.25rem);
  --p-radius-small: 0.2rem;
  --p-line: 1px;
  --p-motion-fast: 160ms;
  --p-motion-standard: 260ms;
  --p-motion-ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Semantics */
  --color-canvas: var(--p-black);
  --color-surface: var(--p-charcoal);
  --color-surface-raised: var(--p-panel);
  --color-frame: var(--p-frame);
  --color-line: rgb(245 245 243 / 16%);
  --color-line-quiet: rgb(245 245 243 / 9%);
  --color-text: var(--p-white);
  --color-text-secondary: var(--p-gray-300);
  --color-text-muted: var(--p-gray-500);
  --color-accent: var(--p-white);
  --color-focus: var(--p-white);
  --texture-dot: rgb(245 245 243 / 13%);
  --texture-side-dot: rgb(245 245 243 / 35%);
  --texture-flow: url("../assets/essentiz-flow-dark.svg");
  --texture-flow-opacity: 0.42;
  --hero-background: radial-gradient(ellipse at 50% 44%, #1c1c1f 0, #101012 34%, var(--color-canvas) 73%);
  --contact-wash: radial-gradient(ellipse at 4% 100%, rgb(245 245 243 / 7%), transparent 49%);
  --panel-backdrop: rgb(5 5 5 / 72%);
  --font-body: var(--p-font);
  --font-display: var(--p-font-display);
  --type-caption: var(--p-size-caption);
  --type-small: var(--p-size-small);
  --type-body: var(--p-size-body);
  --type-heading: var(--p-size-heading);
  --type-display: var(--p-size-display);
  --leading-body: var(--p-leading-body);
  --leading-heading: var(--p-leading-heading);
  --tracking-display: var(--p-track-display);
  --space-1: var(--p-space-1);
  --space-2: var(--p-space-2);
  --space-3: var(--p-space-3);
  --space-4: var(--p-space-4);
  --space-6: var(--p-space-6);
  --space-8: var(--p-space-8);
  --space-12: var(--p-space-12);
  --space-16: var(--p-space-16);
  --space-24: var(--p-space-24);
  --space-32: var(--p-space-32);
  --layout-width: var(--p-content-width);
  --layout-gutter: var(--p-gutter);
  --motion-fast: var(--p-motion-fast);
  --motion-standard: var(--p-motion-standard);
  --motion-easing: var(--p-motion-ease);

  /* Components */
  --button-height: 3.25rem;
  --button-padding: var(--space-6);
  --button-radius: var(--p-radius-small);
  --button-motion-bg: var(--color-text);
  --button-motion-fg: var(--color-canvas);
  --button-motion-hover-bg: #bfc0bd;
  --button-motion-hover-fg: #111112;
  --button-primary-bg: var(--color-text);
  --button-primary-fg: var(--color-canvas);
  --button-outline-border: var(--color-line);
  --header-height: 5.25rem;
  --header-action-hover-bg: #c9c9c9;
  --header-action-hover-fg: #111113;
  --header-action-hover-glow: rgb(245 245 243 / 12%);
  --panel-padding: clamp(var(--space-6), 4vw, var(--space-12));
  --accordion-line: var(--p-line) solid var(--color-line);
  --footer-bg: var(--color-canvas);
}

html[data-theme="light"] {
  color-scheme: light;
  --p-black: #151517;
  --p-white: #171719;
  --p-gray-300: #e0e0de;
  --p-gray-500: #626266;
  --p-gray-700: #a4a4a6;
  --color-canvas: #f2f1ef;
  --color-surface: #e8e7e4;
  --color-surface-raised: #ffffff;
  --color-frame: #c5c5c2;
  --color-line: rgb(21 21 23 / 18%);
  --color-line-quiet: rgb(21 21 23 / 10%);
  --color-text: #171719;
  --color-text-secondary: #48484b;
  --color-text-muted: #626266;
  --color-accent: #171719;
  --color-focus: #252528;
  --texture-dot: rgb(21 21 23 / 14%);
  --texture-side-dot: rgb(21 21 23 / 25%);
  --texture-flow: url("../assets/essentiz-flow-light.svg");
  --texture-flow-opacity: 0.34;
  --hero-background: radial-gradient(ellipse at 50% 44%, #ffffff 0, #e9e8e5 36%, var(--color-canvas) 74%);
  --contact-wash: radial-gradient(ellipse at 4% 100%, rgb(21 21 23 / 6%), transparent 49%);
  --panel-backdrop: rgb(255 255 255 / 75%);
  --button-primary-bg: var(--color-text);
  --button-primary-fg: var(--color-canvas);
  --button-outline-border: var(--color-line);
  --header-background: var(--color-canvas);
  --header-action-hover-bg: #353538;
  --header-action-hover-fg: #ffffff;
  --header-action-hover-glow: rgb(21 21 23 / 12%);
  --footer-bg: var(--color-canvas);
}

@media (prefers-reduced-motion: reduce) {
  :root { --motion-fast: 1ms; --motion-standard: 1ms; }
}