/*
 * SEMANTIC TOKEN LAYER — mirrors packages/unity-design/src/styles/tokens-semantic.css
 * (unity-surfaces): the `--color-*`, `--text-*`, `--spacing-*`, `--radius-*`,
 * `--container-*` names Unity registers with `@theme inline`. Here they are
 * plain custom properties, since there is no Tailwind.
 *
 * This is the only token surface base.css and components.css consume.
 *
 * Two deliberate differences from Unity, both to be dropped at the port:
 *  - text sizes are Unity's fixed defaults (`--semantic-text-*`), not the fluid
 *    scale its apps opt into with `data-fluid-text`;
 *  - `--spacing-small` is the fixed low end of Unity's fluid `w6` (16px).
 */

:root {
  /* text size */
  --text-pill: 10px;
  --text-fine: 12px;
  --text-compact: 13px;
  --text-small: 14px;
  --text-body: 15px;
  --text-button: 16px; /* keep controls at 16px to avoid iOS form zoom */
  --text-large: 17px;
  --text-heading: 23px;

  /* text line-height */
  --default-line-height: calc(24 / 16.5);
  --text-fine--line-height: 1.55;
  --text-heading--line-height: 1.25;

  /* text letter-spacing */
  --text-heading--letter-spacing: -0.01em;

  /* fonts: Unity sets these from next/font (packages/unity-design/src/next/fonts.ts) */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* widths */
  --container-panel: 520px;

  /* spacing */
  --spacing-inset: 20px;
  --spacing-button: 44px;
  --spacing-small: 16px;

  /* radius */
  --radius-button: calc(var(--radius) * 5 / 9);
  --radius-card: var(--radius);

  /* colors */
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-foreground-dim: var(--foreground-11);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-border: var(--border);
  --color-ring: var(--ring);
  --color-canvas: var(--canvas);

  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-destructive-reversed: var(--destructive-reversed);
  --color-success-foreground: var(--success-foreground);
  --color-success-reversed: var(--success-reversed);
  --color-warning: var(--warning);
  --color-warning-foreground: var(--warning-foreground);
  --color-warning-reversed: var(--warning-reversed);

  --color-accent: var(--accent-primary);
  --color-accent-foreground: color-mix(in oklab, var(--color-accent) 72%, var(--color-foreground));

  --shadow-surface-2: var(--shadow-2);
}