/*
 * Chiasm design tokens
 * Version 1.0 — 2026-08-04
 *
 * Public contract:
 *   Theme:    data-theme="standard|parchment|vibe|dark"
 *   Rhetoric: data-rhetoric="chiasm|parallel|inclusion|pivot|contrast|repetition"
 *   Variant:  data-annotation-variant="neutral|secondary|accent"
 *
 * Components should use semantic tokens only. Palette primitives are provided
 * as reference values and should not be consumed directly in component CSS.
 */

:root {
  color-scheme: light;

  /* Brand primitives — Standard */
  --chiasm-neutral-000: #ffffff;
  --chiasm-neutral-100: #e8e8e8;
  --chiasm-neutral-400: #adadad;
  --chiasm-neutral-800: #222222;
  --chiasm-neutral-900: #111315;

  --chiasm-blue-300: #6da5d0;
  --chiasm-blue-600: #316b97;
  --chiasm-blue-800: #1f4460;

  --chiasm-copper-300: #e49a5d;
  --chiasm-copper-600: #b3611e;
  --chiasm-copper-800: #955119;

  /* Brand primitives — Parchment */
  --chiasm-parchment-100: #f8f4e8;
  --chiasm-parchment-300: #f1e9d2;
  --chiasm-parchment-500: #ddd6c8;

  /* Brand primitives — Vibe */
  --chiasm-vibe-canvas: #383b43;
  --chiasm-vibe-surface: #727888;
  --chiasm-violet-300: #aea5f3;
  --chiasm-violet-500: #9c91f0;
  --chiasm-violet-700: #7666ea;
  --chiasm-periwinkle-300: #aec1f9;
  --chiasm-periwinkle-500: #95aef7;
  --chiasm-periwinkle-700: #5980f2;

  /* Brand primitives — Dark */
  --chiasm-dark-canvas: #111315;
  --chiasm-dark-surface: #2e3338;
  --chiasm-dark-surface-raised: #585a5c;
  --chiasm-coral-300: #f79f83;
  --chiasm-coral-500: #f16132;
  --chiasm-coral-700: #ef4710;
  --chiasm-teal-300: #96c5bf;
  --chiasm-teal-500: #6bada5;
  --chiasm-teal-700: #457d76;
  --chiasm-warm-white: #e8e6e3;

  /* Exact functional colors from the Figma exploration — Standard */
  --figma-standard-pivot: rgba(151, 93, 49, 0.85);
  --figma-standard-marker-blue: rgba(49, 107, 151, 0.97);
  --figma-standard-marker-orange: #b3611e;
  --figma-standard-marker-green: rgba(10, 122, 69, 0.74);
  --figma-standard-notation-1: rgba(210, 218, 241, 0.97);
  --figma-standard-notation-2: rgba(173, 178, 218, 0.97);
  --figma-standard-notation-3: rgba(110, 126, 173, 0.97);
  --figma-standard-notation-4: rgba(51, 71, 129, 0.97);
  --figma-standard-wheel-1: rgba(226, 197, 178, 0.97);
  --figma-standard-wheel-2: rgba(210, 166, 136, 0.97);
  --figma-standard-wheel-3: rgba(178, 111, 67, 0.97);
  --figma-standard-wheel-4: rgba(122, 76, 46, 0.97);

  /* Exact functional colors from the Figma exploration — Vibe */
  --figma-vibe-pivot: rgba(243, 135, 99, 0.85);
  --figma-vibe-marker-blue: rgba(86, 165, 246, 0.97);
  --figma-vibe-marker-orange: #e09a6c;
  --figma-vibe-marker-green: rgba(66, 202, 137, 0.74);
  --figma-vibe-notation-1: rgba(217, 226, 252, 0.97);
  --figma-vibe-notation-2: rgba(149, 174, 247, 0.97);
  --figma-vibe-notation-3: rgba(99, 135, 243, 0.97);
  --figma-vibe-notation-4: rgba(61, 106, 240, 0.97);
  --figma-vibe-wheel-1: rgba(235, 233, 252, 0.97);
  --figma-vibe-wheel-2: rgba(190, 183, 245, 0.97);
  --figma-vibe-wheel-3: rgba(156, 145, 240, 0.97);
  --figma-vibe-wheel-4: rgba(118, 102, 234, 0.97);

  /* Exact functional colors from the Figma exploration — Dark */
  --figma-dark-pivot: rgba(92, 210, 248, 0.85);
  --figma-dark-marker-blue: rgba(30, 124, 220, 0.97);
  --figma-dark-marker-orange: #cf5302;
  --figma-dark-marker-green: rgba(1, 182, 96, 0.88);
  --figma-dark-notation-1: rgba(255, 220, 209, 0.97);
  --figma-dark-notation-2: rgba(255, 185, 163, 0.97);
  --figma-dark-notation-3: rgba(248, 130, 92, 0.97);
  --figma-dark-notation-4: rgba(190, 98, 68, 0.97);
  --figma-dark-wheel-1: rgba(215, 254, 249, 0.97);
  --figma-dark-wheel-2: rgba(142, 221, 212, 0.97);
  --figma-dark-wheel-3: rgba(107, 173, 165, 0.97);
  --figma-dark-wheel-4: rgba(77, 131, 124, 0.97);

  /* Semantic color tokens — Standard is the default theme */
  --color-bg-canvas: var(--chiasm-neutral-000);
  --color-bg-surface: #f7f8fa;
  --color-bg-surface-raised: var(--chiasm-neutral-000);
  --color-notification-surface: var(--chiasm-neutral-000);
  --color-bg-surface-strong: var(--chiasm-neutral-100);
  --color-text-primary: var(--chiasm-neutral-800);
  --color-text-secondary: #68717c;
  --color-text-inverse: var(--chiasm-neutral-000);
  --color-border-subtle: #d8dde5;
  --color-action-primary: var(--chiasm-blue-600);
  --color-action-primary-hover: var(--chiasm-blue-800);
  --color-action-primary-soft: #e8f0f7;
  --color-accent: var(--chiasm-copper-600);
  --color-accent-hover: var(--chiasm-copper-800);
  --color-accent-soft: #f5e7d7;
  --color-focus: #416a94;
  --color-selection: rgba(65, 106, 148, 0.16);
  --color-status-success: #456f2f;
  --color-status-success-soft: #edf5e8;
  --color-status-success-border: #a8c895;
  --color-status-warning: #85501f;
  --color-status-warning-soft: #fff4e6;
  --color-status-warning-border: #d9ae7c;
  --color-status-error: #984a3a;
  --color-status-error-soft: #fff0ed;
  --color-status-error-border: #d8a49a;
  --color-overlay-scrim: rgba(17, 19, 21, 0.58);

  /* Type */
  --font-body: var(--font-primary);
  --font-primary: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-secondary: "Krub", "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-ui: var(--font-secondary);
  --font-reader: var(--font-primary);
  --font-display: var(--font-primary);
  --font-label: var(--font-secondary);
  --font-annotation: var(--font-secondary);
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  --font-primary-weight: 400;
  --font-secondary-weight: 600;

  --text-display-size: clamp(2.25rem, 5vw, 3.5rem);
  --text-display-line: 1.15;
  --text-h1-size: clamp(1.875rem, 3vw, 2.5rem);
  --text-h1-line: 1.2;
  --text-h2-size: 1.5625rem;
  --text-h2-line: 1.2;
  --text-h3-size: 1.25rem;
  --text-h3-line: 1.3;
  --text-reader-size: clamp(1.1875rem, 1.8vw, 1.4375rem);
  --text-reader-line: 1.55;
  --text-body-size: 1rem;
  --text-body-line: 1.5;
  --text-small-size: 0.875rem;
  --text-small-line: 1.5;
  --text-label-size: 0.75rem;
  --text-label-line: 1.35;
  --text-micro-size: 0.625rem;
  --text-micro-line: 1.5;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  /* Shape and depth */
  --radius-sm: 5px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 50px;
  --radius-pill: 999px;
  --shadow-sm: 0 4px 12px rgba(31, 37, 43, 0.09);
  --shadow-md: 0 18px 45px rgba(52, 44, 32, 0.11);
  --shadow-lg: 0 24px 70px rgba(31, 37, 43, 0.18);
  --shadow-inset: inset 0 1px 4px rgba(0, 0, 0, 0.14);
  --surface-blur: 12px;

  /* Motion */
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);

  /* Active theme palette — shared by every rhetorical type */
  --theme-primary-main: var(--chiasm-neutral-000);
  --theme-primary-light: var(--chiasm-neutral-100);
  --theme-primary-dark: var(--chiasm-neutral-400);
  --theme-secondary-main: var(--chiasm-blue-600);
  --theme-secondary-light: var(--chiasm-blue-300);
  --theme-secondary-dark: var(--chiasm-blue-800);
  --theme-accent-main: var(--chiasm-copper-600);
  --theme-accent-light: var(--chiasm-copper-300);
  --theme-accent-dark: var(--chiasm-copper-800);
  --annotation-pivot: var(--figma-standard-pivot);
  --annotation-marker-blue: var(--figma-standard-marker-blue);
  --annotation-marker-orange: var(--figma-standard-marker-orange);
  --annotation-marker-green: var(--figma-standard-marker-green);
  --chiasm-notation-1: var(--figma-standard-notation-1);
  --chiasm-notation-2: var(--figma-standard-notation-2);
  --chiasm-notation-3: var(--figma-standard-notation-3);
  --chiasm-notation-4: var(--figma-standard-notation-4);
  --chiasm-notation-bright: var(--figma-standard-notation-1);
  --chiasm-notation-dark: var(--figma-standard-notation-4);
  --selection-wheel-1: var(--figma-standard-wheel-1);
  --selection-wheel-2: var(--figma-standard-wheel-2);
  --selection-wheel-3: var(--figma-standard-wheel-3);
  --selection-wheel-4: var(--figma-standard-wheel-4);
  --selection-wheel-bright: var(--figma-standard-wheel-1);
  --selection-wheel-dark: var(--figma-standard-wheel-4);
  --chiasm-notation-text-bright: #526987;
  --chiasm-notation-text-dark: #253f67;

  /* Component aliases */
  --tile-bg: var(--color-bg-surface-raised);
  --tile-border: var(--color-border-subtle);
  --tile-radius: var(--radius-lg);
  --tile-shadow: var(--shadow-md);
  --tile-gap: var(--space-4);
  --tile-padding: var(--space-5);
  --tile-overlap: var(--space-3);
  --control-bg: var(--color-bg-surface);
  --control-radius: var(--radius-sm);
}
:root,
[data-theme="standard"] {
  color-scheme: light;
  --color-bg-canvas: var(--chiasm-neutral-000);
  --color-bg-surface: #f7f8fa;
  --color-bg-surface-raised: var(--chiasm-neutral-000);
  --color-notification-surface: var(--chiasm-neutral-000);
  --color-bg-surface-strong: var(--chiasm-neutral-100);
  --color-text-primary: var(--chiasm-neutral-800);
  --color-text-secondary: #68717c;
  --color-text-inverse: var(--chiasm-neutral-000);
  --color-border-subtle: #d8dde5;
  --color-action-primary: var(--chiasm-blue-600);
  --color-action-primary-hover: var(--chiasm-blue-800);
  --color-action-primary-soft: #e8f0f7;
  --color-accent: var(--chiasm-copper-600);
  --color-accent-hover: var(--chiasm-copper-800);
  --color-accent-soft: #f5e7d7;
  --color-focus: #416a94;
  --color-selection: rgba(65, 106, 148, 0.16);
  --color-status-success: #456f2f;
  --color-status-success-soft: #edf5e8;
  --color-status-success-border: #a8c895;
  --color-status-warning: #85501f;
  --color-status-warning-soft: #fff4e6;
  --color-status-warning-border: #d9ae7c;
  --color-status-error: #984a3a;
  --color-status-error-soft: #fff0ed;
  --color-status-error-border: #d8a49a;
  --color-overlay-scrim: rgba(17, 19, 21, 0.58);
  --font-primary: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-secondary: "Krub", "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-ui: var(--font-secondary);
  --font-reader: var(--font-primary);
  --font-display: var(--font-primary);
  --font-label: var(--font-secondary);
  --font-annotation: var(--font-secondary);
  --font-primary-weight: 400;
  --font-secondary-weight: 600;
  --tile-shadow: var(--shadow-md);
  --theme-primary-main: var(--chiasm-neutral-000);
  --theme-primary-light: var(--chiasm-neutral-100);
  --theme-primary-dark: var(--chiasm-neutral-400);
  --theme-secondary-main: var(--chiasm-blue-600);
  --theme-secondary-light: var(--chiasm-blue-300);
  --theme-secondary-dark: var(--chiasm-blue-800);
  --theme-accent-main: var(--chiasm-copper-600);
  --theme-accent-light: var(--chiasm-copper-300);
  --theme-accent-dark: var(--chiasm-copper-800);
  --annotation-pivot: var(--figma-standard-pivot);
  --annotation-marker-blue: var(--figma-standard-marker-blue);
  --annotation-marker-orange: var(--figma-standard-marker-orange);
  --annotation-marker-green: var(--figma-standard-marker-green);
  --chiasm-notation-1: var(--figma-standard-notation-1);
  --chiasm-notation-2: var(--figma-standard-notation-2);
  --chiasm-notation-3: var(--figma-standard-notation-3);
  --chiasm-notation-4: var(--figma-standard-notation-4);
  --chiasm-notation-bright: var(--figma-standard-notation-1);
  --chiasm-notation-dark: var(--figma-standard-notation-4);
  --selection-wheel-1: var(--figma-standard-wheel-1);
  --selection-wheel-2: var(--figma-standard-wheel-2);
  --selection-wheel-3: var(--figma-standard-wheel-3);
  --selection-wheel-4: var(--figma-standard-wheel-4);
  --selection-wheel-bright: var(--figma-standard-wheel-1);
  --selection-wheel-dark: var(--figma-standard-wheel-4);
  --chiasm-notation-text-bright: #526987;
  --chiasm-notation-text-dark: #253f67;
}

[data-theme="parchment"] {
  color-scheme: light;
  --color-bg-canvas: var(--chiasm-parchment-300);
  --color-bg-surface: var(--chiasm-parchment-100);
  --color-bg-surface-raised: var(--chiasm-parchment-100);
  --color-notification-surface: var(--chiasm-parchment-100);
  --color-bg-surface-strong: #e8ddc1;
  --color-text-primary: var(--chiasm-neutral-800);
  --color-text-secondary: #625b50;
  --color-text-inverse: var(--chiasm-neutral-000);
  --color-border-subtle: var(--chiasm-parchment-500);
  --color-action-primary: var(--chiasm-blue-600);
  --color-action-primary-hover: var(--chiasm-blue-800);
  --color-action-primary-soft: #e8f0f7;
  --color-accent: var(--chiasm-copper-600);
  --color-accent-hover: var(--chiasm-copper-800);
  --color-accent-soft: #f5e7d7;
  --color-focus: #416a94;
  --color-selection: rgba(179, 97, 30, 0.17);
  --color-status-success: #3f6b36;
  --color-status-success-soft: #e8efdc;
  --color-status-success-border: #9eb28b;
  --color-status-warning: #85561f;
  --color-status-warning-soft: #f7ebcf;
  --color-status-warning-border: #cbaa6a;
  --color-status-error: #923f34;
  --color-status-error-soft: #f7e3dc;
  --color-status-error-border: #c99489;
  --color-overlay-scrim: rgba(34, 28, 20, 0.52);
  --font-primary: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-secondary: "Oswald", "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-ui: "Oswald", "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-reader: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-display: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-label: "Oswald", "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-annotation: "Oswald", "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-primary-weight: 400;
  --font-secondary-weight: 400;
  --tile-shadow: var(--shadow-md);
  --theme-primary-main: var(--chiasm-parchment-300);
  --theme-primary-light: var(--chiasm-parchment-100);
  --theme-primary-dark: var(--chiasm-parchment-500);
  --theme-secondary-main: var(--chiasm-blue-600);
  --theme-secondary-light: var(--chiasm-blue-300);
  --theme-secondary-dark: var(--chiasm-blue-800);
  --theme-accent-main: var(--chiasm-copper-600);
  --theme-accent-light: var(--chiasm-copper-300);
  --theme-accent-dark: var(--chiasm-copper-800);
  --annotation-pivot: var(--figma-standard-pivot);
  --annotation-marker-blue: var(--figma-standard-marker-blue);
  --annotation-marker-orange: var(--figma-standard-marker-orange);
  --annotation-marker-green: var(--figma-standard-marker-green);
  --chiasm-notation-1: var(--figma-standard-notation-1);
  --chiasm-notation-2: var(--figma-standard-notation-2);
  --chiasm-notation-3: var(--figma-standard-notation-3);
  --chiasm-notation-4: var(--figma-standard-notation-4);
  --chiasm-notation-bright: var(--figma-standard-notation-1);
  --chiasm-notation-dark: var(--figma-standard-notation-4);
  --selection-wheel-1: var(--figma-standard-wheel-1);
  --selection-wheel-2: var(--figma-standard-wheel-2);
  --selection-wheel-3: var(--figma-standard-wheel-3);
  --selection-wheel-4: var(--figma-standard-wheel-4);
  --selection-wheel-bright: var(--figma-standard-wheel-1);
  --selection-wheel-dark: var(--figma-standard-wheel-4);
  --chiasm-notation-text-bright: #526987;
  --chiasm-notation-text-dark: #253f67;
}

[data-theme="vibe"] {
  color-scheme: dark;
  --color-bg-canvas: var(--chiasm-vibe-canvas);
  --color-bg-surface: #454952;
  --color-bg-surface-raised: #454952;
  --color-notification-surface: #454952;
  --color-bg-surface-strong: var(--chiasm-vibe-surface);
  --color-text-primary: var(--chiasm-warm-white);
  --color-text-secondary: #c4c7cf;
  --color-text-inverse: var(--chiasm-neutral-800);
  --color-border-subtle: #606672;
  --color-action-primary: var(--chiasm-periwinkle-500);
  --color-action-primary-hover: var(--chiasm-periwinkle-300);
  --color-action-primary-soft: rgba(149, 174, 247, 0.18);
  --color-accent: var(--chiasm-violet-300);
  --color-accent-hover: #c2bbf7;
  --color-accent-soft: rgba(156, 145, 240, 0.18);
  --color-focus: var(--chiasm-periwinkle-300);
  --color-selection: rgba(174, 193, 249, 0.22);
  --color-status-success: #8bd7a8;
  --color-status-success-soft: rgba(80, 191, 124, 0.18);
  --color-status-success-border: rgba(139, 215, 168, 0.58);
  --color-status-warning: #f3c97a;
  --color-status-warning-soft: rgba(243, 201, 122, 0.18);
  --color-status-warning-border: rgba(243, 201, 122, 0.58);
  --color-status-error: #ff9e91;
  --color-status-error-soft: rgba(255, 112, 96, 0.18);
  --color-status-error-border: rgba(255, 158, 145, 0.58);
  --color-overlay-scrim: rgba(10, 12, 18, 0.66);
  --font-primary: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-secondary: "Krub", "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-ui: "Krub", "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-reader: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-label: "Krub", "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-annotation: "Krub", "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-primary-weight: 500;
  --font-secondary-weight: 700;
  --tile-shadow: 0 18px 45px rgba(0, 0, 0, 0.26);
  --theme-primary-main: var(--chiasm-vibe-canvas);
  --theme-primary-light: var(--chiasm-vibe-surface);
  --theme-primary-dark: #2e2f36;
  --theme-secondary-main: var(--chiasm-violet-500);
  --theme-secondary-light: var(--chiasm-violet-300);
  --theme-secondary-dark: var(--chiasm-violet-700);
  --theme-accent-main: var(--chiasm-periwinkle-500);
  --theme-accent-light: var(--chiasm-periwinkle-300);
  --theme-accent-dark: var(--chiasm-periwinkle-700);
  --annotation-pivot: var(--figma-vibe-pivot);
  --annotation-marker-blue: var(--figma-vibe-marker-blue);
  --annotation-marker-orange: var(--figma-vibe-marker-orange);
  --annotation-marker-green: var(--figma-vibe-marker-green);
  --chiasm-notation-1: var(--figma-vibe-notation-1);
  --chiasm-notation-2: var(--figma-vibe-notation-2);
  --chiasm-notation-3: var(--figma-vibe-notation-3);
  --chiasm-notation-4: var(--figma-vibe-notation-4);
  --chiasm-notation-bright: var(--figma-vibe-notation-1);
  --chiasm-notation-dark: var(--figma-vibe-notation-4);
  --selection-wheel-1: var(--figma-vibe-wheel-1);
  --selection-wheel-2: var(--figma-vibe-wheel-2);
  --selection-wheel-3: var(--figma-vibe-wheel-3);
  --selection-wheel-4: var(--figma-vibe-wheel-4);
  --selection-wheel-bright: var(--figma-vibe-wheel-1);
  --selection-wheel-dark: var(--figma-vibe-wheel-4);
  --chiasm-notation-text-bright: #d9e2fc;
  --chiasm-notation-text-dark: #b5c8ff;
}

[data-theme="dark"] {
  color-scheme: dark;
  --color-bg-canvas: var(--chiasm-dark-canvas);
  --color-bg-surface: var(--chiasm-dark-surface);
  --color-bg-surface-raised: var(--chiasm-dark-surface);
  --color-notification-surface: var(--chiasm-dark-surface);
  --color-bg-surface-strong: var(--chiasm-dark-surface-raised);
  --color-text-primary: var(--chiasm-warm-white);
  --color-text-secondary: #b9b7b3;
  --color-text-inverse: var(--chiasm-neutral-800);
  --color-border-subtle: #45494d;
  --color-action-primary: var(--chiasm-coral-500);
  --color-action-primary-hover: var(--chiasm-coral-300);
  --color-action-primary-soft: rgba(241, 97, 50, 0.16);
  --color-accent: var(--chiasm-teal-500);
  --color-accent-hover: var(--chiasm-teal-300);
  --color-accent-soft: rgba(107, 173, 165, 0.16);
  --color-focus: var(--chiasm-teal-300);
  --color-selection: rgba(247, 159, 131, 0.2);
  --color-status-success: #92d09b;
  --color-status-success-soft: rgba(77, 161, 91, 0.2);
  --color-status-success-border: rgba(146, 208, 155, 0.58);
  --color-status-warning: #f0c177;
  --color-status-warning-soft: rgba(240, 193, 119, 0.18);
  --color-status-warning-border: rgba(240, 193, 119, 0.58);
  --color-status-error: #ffad9d;
  --color-status-error-soft: rgba(239, 71, 16, 0.2);
  --color-status-error-border: rgba(255, 173, 157, 0.58);
  --color-overlay-scrim: rgba(0, 0, 0, 0.72);
  --font-primary: "Literata", Georgia, "Times New Roman", serif;
  --font-secondary: "Lexend", "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-ui: "Lexend", "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-reader: "Literata", Georgia, "Times New Roman", serif;
  --font-display: "Literata", Georgia, "Times New Roman", serif;
  --font-label: "Lexend", "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-annotation: "Lexend", "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-primary-weight: 400;
  --font-secondary-weight: 500;
  --tile-shadow: 0 18px 45px rgba(0, 0, 0, 0.34);
  --theme-primary-main: var(--chiasm-dark-canvas);
  --theme-primary-light: var(--chiasm-dark-surface-raised);
  --theme-primary-dark: var(--chiasm-dark-surface);
  --theme-secondary-main: var(--chiasm-coral-500);
  --theme-secondary-light: var(--chiasm-coral-300);
  --theme-secondary-dark: var(--chiasm-coral-700);
  --theme-accent-main: var(--chiasm-teal-500);
  --theme-accent-light: var(--chiasm-teal-300);
  --theme-accent-dark: var(--chiasm-teal-700);
  --annotation-pivot: var(--figma-dark-pivot);
  --annotation-marker-blue: var(--figma-dark-marker-blue);
  --annotation-marker-orange: var(--figma-dark-marker-orange);
  --annotation-marker-green: var(--figma-dark-marker-green);
  --chiasm-notation-1: var(--figma-dark-notation-1);
  --chiasm-notation-2: var(--figma-dark-notation-2);
  --chiasm-notation-3: var(--figma-dark-notation-3);
  --chiasm-notation-4: var(--figma-dark-notation-4);
  --chiasm-notation-bright: var(--figma-dark-notation-1);
  --chiasm-notation-dark: var(--figma-dark-notation-4);
  --selection-wheel-1: var(--figma-dark-wheel-1);
  --selection-wheel-2: var(--figma-dark-wheel-2);
  --selection-wheel-3: var(--figma-dark-wheel-3);
  --selection-wheel-4: var(--figma-dark-wheel-4);
  --selection-wheel-bright: var(--figma-dark-wheel-1);
  --selection-wheel-dark: var(--figma-dark-wheel-4);
  --chiasm-notation-text-bright: #ffdcd1;
  --chiasm-notation-text-dark: #f49b7f;
}

/*
 * Re-resolve component aliases on the element that owns the active theme.
 * Without this layer, aliases declared on :root retain the Standard values
 * when data-theme is applied to a descendant such as <body> or <main>.
 */
[data-theme] {
  --tile-bg: var(--color-bg-surface-raised);
  --tile-border: var(--color-border-subtle);
  --control-bg: var(--color-bg-surface);
}

/* Recommended base application */
html {
  background: var(--color-bg-canvas);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: 100%;
}

body {
  margin: 0;
  background: var(--color-bg-canvas);
  color: var(--color-text-primary);
  font-size: var(--text-body-size);
  line-height: var(--text-body-line);
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--color-selection);
}

:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}

.type-display {
  font-family: var(--font-display);
  font-size: var(--text-display-size);
  font-weight: var(--font-primary-weight);
  line-height: var(--text-display-line);
  letter-spacing: -0.02em;
}

.type-heading-1 {
  font-family: var(--font-display);
  font-size: var(--text-h1-size);
  font-weight: var(--font-primary-weight);
  line-height: var(--text-h1-line);
  letter-spacing: -0.015em;
}

.type-heading-2 {
  font-family: var(--font-display);
  font-size: var(--text-h2-size);
  font-weight: var(--font-primary-weight);
  line-height: var(--text-h2-line);
}

.type-reader {
  max-width: 68ch;
  font-family: var(--font-reader);
  font-size: var(--text-reader-size);
  font-weight: var(--font-primary-weight);
  line-height: var(--text-reader-line);
}

.type-body {
  font-family: var(--font-body);
  font-size: var(--text-body-size);
  line-height: var(--text-body-line);
}

.type-label {
  font-family: var(--font-label);
  font-size: var(--text-label-size);
  font-weight: var(--font-secondary-weight);
  line-height: var(--text-label-line);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.bubble-tile {
  border: 1px solid var(--tile-border);
  border-radius: var(--tile-radius);
  background: color-mix(in srgb, var(--tile-bg) 92%, transparent);
  box-shadow: var(--tile-shadow);
  padding: var(--space-5);
  backdrop-filter: blur(var(--surface-blur));
  -webkit-backdrop-filter: blur(var(--surface-blur));
}

.control {
  min-height: 2.75rem;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--control-radius);
  background: var(--control-bg);
  color: var(--color-text-primary);
  font: var(--font-secondary-weight) var(--text-small-size) / 1 var(--font-ui);
  padding: 0 var(--space-4);
  transition:
    background-color var(--duration-base) var(--ease-standard),
    border-color var(--duration-base) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard);
}

.control--primary {
  border-color: var(--color-action-primary);
  background: var(--color-action-primary);
  color: var(--color-text-inverse);
}

.control--primary:hover {
  border-color: var(--color-action-primary-hover);
  background: var(--color-action-primary-hover);
}

.control:active {
  transform: translateY(1px);
}

.annotation {
  --annotation-color: var(--theme-secondary-main);
  --annotation-fill: var(--theme-secondary-light);
  border-inline-start: 4px solid var(--annotation-color);
  background: color-mix(in srgb, var(--annotation-fill) 14%, transparent);
  padding: var(--space-3) var(--space-4);
}

[data-annotation-variant="neutral"] {
  --annotation-color: var(--color-text-secondary);
  --annotation-fill: var(--theme-primary-light);
}

[data-annotation-variant="secondary"] {
  --annotation-color: var(--theme-secondary-main);
  --annotation-fill: var(--theme-secondary-light);
}

[data-annotation-variant="accent"] {
  --annotation-color: var(--theme-accent-main);
  --annotation-fill: var(--theme-accent-light);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}