/* Khorala Foundation 0.10 — semantic design tokens */
:root,
[data-theme="light"] {
  color-scheme: light;

  /* Brand primitives */
  --kh-brand-aubergine: #2a1546;
  --kh-brand-aubergine-deep: #1e0c37;
  --kh-brand-plum: #57327a;
  --kh-brand-coral: #ff6257;
  --kh-brand-coral-action: #bc4c2f;
  --kh-brand-coral-text: #92251f;
  --kh-neutral-porcelain: #fbf8f4;
  --kh-neutral-ink: #211629;
  --kh-neutral-mist: #e7dee9;
  --kh-neutral-white: #ffffff;

  /* Semantic color roles */
  --kh-canvas: var(--kh-neutral-porcelain);
  --kh-surface: var(--kh-neutral-white);
  --kh-surface-muted: #f5f0f5;
  --kh-text-primary: var(--kh-neutral-ink);
  --kh-text-secondary: #6f6675;
  --kh-text-accent: var(--kh-brand-coral-text);
  --kh-border-subtle: var(--kh-neutral-mist);
  --kh-border-strong: #8b808e;
  --kh-action-primary: var(--kh-brand-aubergine);
  --kh-action-primary-text: var(--kh-neutral-white);
  --kh-action-decision: var(--kh-brand-coral-action);
  --kh-action-decision-hover: #a64027;
  --kh-action-decision-text: var(--kh-neutral-white);
  --kh-selection: var(--kh-brand-coral);
  --kh-focus-ring: #8b5dc1;
  --kh-success: #2f6e58;
  --kh-success-surface: #e5f2ec;
  --kh-warning: #8a590c;
  --kh-warning-surface: #fff1d9;
  --kh-danger: #99414b;
  --kh-danger-surface: #f7e4e7;
  --kh-info: #365f91;
  --kh-info-surface: #e8f0fa;

  /* Analytical ramps */
  --kh-ramp-1: #f1ebf4;
  --kh-ramp-2: #d8c9e2;
  --kh-ramp-3: #b69bca;
  --kh-ramp-4: #765299;
  --kh-ramp-5: #2a1546;

  /* Typography */
  --kh-font-ui: "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
  --kh-font-data: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  --kh-type-12: 0.75rem;
  --kh-type-14: 0.875rem;
  --kh-type-16: 1rem;
  --kh-type-20: 1.25rem;
  --kh-type-24: 1.5rem;
  --kh-type-32: 2rem;
  --kh-leading-tight: 1.1;
  --kh-leading-ui: 1.35;
  --kh-leading-body: 1.55;
  --kh-tracking-display: -0.032em;
  --kh-tracking-heading: -0.025em;
  --kh-tracking-data-display: -0.03em;

  /* Space, shape, depth */
  --kh-space-1: 0.25rem;
  --kh-space-2: 0.5rem;
  --kh-space-3: 0.75rem;
  --kh-space-4: 1rem;
  --kh-space-6: 1.5rem;
  --kh-space-8: 2rem;
  --kh-space-12: 3rem;
  --kh-space-16: 4rem;
  --kh-radius-sm: 0.5rem;
  --kh-radius-control: 0.75rem;
  --kh-radius-card: 1.25rem;
  --kh-radius-feature: 1.75rem;
  --kh-shadow-raised: 0 8px 24px rgb(42 21 70 / 12%);
  --kh-shadow-floating: 0 18px 44px rgb(42 21 70 / 18%);

  /* Motion and layout */
  --kh-duration-fast: 120ms;
  --kh-duration-standard: 180ms;
  --kh-duration-deliberate: 260ms;
  --kh-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --kh-focus-width: 3px;
  --kh-target-min: 44px;
  --kh-content-max: 1240px;
  --kh-breakpoint-compact: 560px;
  --kh-breakpoint-medium: 900px;

  /* Foundation 0.10 compatibility bridge for the packaged specimen CSS.
     New production code should consume the --kh-* semantic names directly. */
  --ink: var(--kh-text-primary);
  --purple: var(--kh-brand-aubergine);
  --purple-deep: var(--kh-brand-aubergine-deep);
  --coral: var(--kh-selection);
  --coral-action: var(--kh-action-decision);
  --coral-text: var(--kh-text-accent);
  --porcelain: var(--kh-canvas);
  --paper: var(--kh-surface);
  --muted: var(--kh-text-secondary);
  --hairline: var(--kh-border-subtle);
  --focus: var(--kh-focus-ring);
  --verified: var(--kh-success);
  --review: var(--kh-warning);
  --danger: var(--kh-danger);
  --surface-soft: var(--kh-surface-muted);
  --ramp-1: var(--kh-ramp-1);
  --ramp-2: var(--kh-ramp-2);
  --ramp-3: var(--kh-ramp-3);
  --ramp-4: var(--kh-ramp-4);
  --ramp-5: var(--kh-ramp-5);
  --font-ui: var(--kh-font-ui);
  --font-data: var(--kh-font-data);
  --tracking-display: var(--kh-tracking-display);
  --tracking-heading: var(--kh-tracking-heading);
  --tracking-data-display: var(--kh-tracking-data-display);
}

[data-theme="dark"] {
  color-scheme: dark;
  --kh-canvas: #160b24;
  --kh-surface: #211033;
  --kh-surface-muted: #2b193d;
  --kh-text-primary: #fbf8f4;
  --kh-text-secondary: #d8cedf;
  --kh-text-accent: #ffbdb8;
  --kh-border-subtle: #4c365e;
  --kh-border-strong: #725c82;
  --kh-action-primary: #fbf8f4;
  --kh-action-primary-text: #2a1546;
  --kh-action-decision: #ff756b;
  --kh-action-decision-hover: #ff9d96;
  --kh-action-decision-text: #211629;
  --kh-selection: #ff756b;
  --kh-focus-ring: #c3a6e0;
  --kh-success: #7bc2a4;
  --kh-success-surface: #173c30;
  --kh-warning: #efbd66;
  --kh-warning-surface: #4a3210;
  --kh-danger: #f0a1a9;
  --kh-danger-surface: #4a2028;
  --kh-info: #9ec6f5;
  --kh-info-surface: #183351;
  --kh-ramp-1: #352144;
  --kh-ramp-2: #513567;
  --kh-ramp-3: #765299;
  --kh-ramp-4: #aa8ac3;
  --kh-ramp-5: #e4d7ec;
  --kh-shadow-raised: 0 8px 24px rgb(0 0 0 / 24%);
  --kh-shadow-floating: 0 18px 44px rgb(0 0 0 / 34%);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --kh-duration-fast: 0ms;
    --kh-duration-standard: 0ms;
    --kh-duration-deliberate: 0ms;
  }
}