/*
 * RAW TOKEN LAYER — mirrors packages/unity-design/src/styles/tokens-primitive.css
 * (unity-surfaces). Same names, same values; only the tokens this UI uses.
 * When Unity changes a value, change it here.
 *
 * Product CSS does not reach into this file: it consumes the semantic layer
 * (tokens-semantic.css). The motion tokens are the exception, as in Unity,
 * which has no semantic alias for them.
 *
 * One difference: Unity switches dark mode on `[data-theme="dark"]` (next-themes).
 * This page has no theme switch, so the same block follows the system setting.
 */

:root {
  --radius: 9px;
  --icon-stroke-width: 1.5;

  /* ========== COLOR TOKENS ========== */
  --background: oklch(1 0 0);
  --foreground: oklch(0.2142 0.0025 67.69);
  --foreground-11: oklch(0.5352 0.0151 71.18);
  --muted-foreground: oklch(0.6615 0.0151 71.18);
  --muted: oklch(0.97 0 0);
  --border: oklch(0.922 0 0);
  --input: oklch(0.815 0 0);
  --ring: oklch(0.708 0 0);

  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: color-mix(in oklch, var(--destructive) 90%, black);
  --destructive-reversed: color-mix(in oklch, var(--destructive) 10%, white);

  --success: oklch(0.7699 0.212 148.6);
  --success-foreground: color-mix(in oklch, var(--success) 80%, black);
  --success-reversed: color-mix(in oklch, var(--success) 10%, white);

  --warning: oklch(66.6% 0.179 58.318);
  --warning-foreground: color-mix(in oklch, var(--warning) 85%, black);
  --warning-reversed: color-mix(in oklch, var(--warning) 10%, white);

  --canvas: oklch(0.9702 0 0);
  --accent-primary: oklch(0.5175 0.2649 272.23); /* Vana blue */

  /* ========== SURFACE TOKENS ========== */
  --shadow-color: rgb(0 0 0 / 0.06);
  --shadow-2: 0 0 0 1px var(--shadow-color), 0 1px 1px -0.5px var(--shadow-color);

  /* ========== INTERACTION TOKENS ========== */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --motion-compact: 150ms;
  --motion-small: 200ms;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: oklch(0.2248 0.0029 264.54);
    --foreground: oklch(0.86 0 0);
    --foreground-11: oklch(0.72 0 0);
    --muted-foreground: oklch(0.64 0 0);
    --muted: oklch(0.23 0 0);
    --border: oklch(0.31 0 0);
    --input: oklch(0.36 0 0);
    --ring: oklch(0.56 0 0);
    --destructive: oklch(0.68 0.19 27);
    --destructive-foreground: color-mix(in oklch, var(--destructive) 90%, white);
    --destructive-reversed: color-mix(in oklch, var(--destructive) 35%, black);
    --success: oklch(0.76 0.18 148.6);
    --success-foreground: color-mix(in oklch, var(--success) 20%, white);
    --success-reversed: color-mix(in oklch, var(--success) 30%, black);
    --warning: oklch(0.74 0.16 58.318);
    --warning-foreground: color-mix(in oklch, var(--warning) 22%, white);
    --warning-reversed: color-mix(in oklch, var(--warning) 30%, black);
    --canvas: oklch(0.18 0 0);
    --accent-primary: oklch(0.68 0.14 253.66);

    --dm-hi-base: rgb(255 255 255 / 0.02);
    --dm-ring-base: rgb(255 255 255 / 0.02);
    --dm-drop: rgb(0 0 0 / 0.18);
    --shadow-2: inset 0 1px 0 0 var(--dm-hi-base), inset 0 0 0 1px var(--dm-ring-base), 0 1px 1px -0.5px var(--dm-drop);

    color-scheme: dark;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-compact: 0ms;
    --motion-small: 0ms;
  }
}