/*
 * @m7kni/ui theme entry.
 * Layer 1: the generated semantic tokens (source of truth — never restated here).
 * Layer 2: @theme inline aliases so Tailwind utilities and the shadcn component
 *          vocabulary both resolve to the same variables at runtime (theme
 *          switching works because values stay var() references).
 */
@import "tailwindcss";
@import "./tokens.css";

@theme inline {
  /* fonts */
  --font-sans: var(--font-family-sans);
  --font-mono: var(--font-family-mono);

  /* system utility names: bg-canvas, text-ink, border-strong, text-ok, … */
  --color-canvas: var(--color-bg-canvas);
  --color-surface: var(--color-bg-surface);
  --color-raised: var(--color-bg-raised);
  --color-hover: var(--color-bg-hover);
  --color-selected: var(--color-bg-selected);
  --color-track: var(--color-bg-track);
  --color-inverse: var(--color-bg-inverse);
  --color-ink: var(--color-fg-default);
  --color-ink-soft: var(--color-fg-soft);
  --color-ink-muted: var(--color-fg-muted);
  --color-ink-faint: var(--color-fg-faint);
  --color-on-inverse: var(--color-fg-on-inverse);
  --color-accent-soft: var(--color-bg-accent-soft);
  --color-ok: var(--color-status-ok);
  --color-warn: var(--color-status-warn);
  --color-fail: var(--color-status-fail);
  --color-strong: var(--color-border-strong);

  /* shadcn component vocabulary → same tokens */
  --color-background: var(--color-bg-canvas);
  --color-foreground: var(--color-fg-default);
  --color-card: var(--color-bg-surface);
  --color-card-foreground: var(--color-fg-default);
  --color-popover: var(--color-bg-raised);
  --color-popover-foreground: var(--color-fg-default);
  --color-primary: var(--color-bg-accent);
  --color-primary-foreground: var(--color-fg-on-accent);
  --color-secondary: var(--color-bg-hover);
  --color-secondary-foreground: var(--color-fg-default);
  --color-muted: var(--color-bg-hover);
  --color-muted-foreground: var(--color-fg-muted);
  --color-accent: var(--color-bg-hover);
  --color-accent-foreground: var(--color-fg-default);
  --color-destructive: var(--color-status-fail);
  --color-destructive-foreground: var(--color-bg-canvas);
  --color-border: var(--color-border-default);
  --color-input: var(--color-border-strong);
  --color-ring: var(--color-bg-accent);

  /* type scale: Tailwind's stock text-* sizes are re-pointed onto the token
     scale so `text-sm` means the system's 12.5px, not Tailwind's 14px.
     text-md is the 13.5px body size. */
  --text-2xs: var(--font-size-2xs);
  --text-2xs--line-height: 1.4;
  --text-xs: var(--font-size-xs);
  --text-xs--line-height: 1.45;
  --text-sm: var(--font-size-sm);
  --text-sm--line-height: 1.5;
  --text-md: var(--font-size-md);
  --text-md--line-height: 1.5;
  --text-base: var(--font-size-md);
  --text-base--line-height: 1.55;
  --text-lg: var(--font-size-lg);
  --text-lg--line-height: 1.5;
  --text-xl: var(--font-size-xl);
  --text-xl--line-height: 1.4;
  --text-2xl: var(--font-size-2xl);
  --text-2xl--line-height: 1.3;

  /* micro-label tracking (inline: the utility resolves the token at runtime) */
  --tracking-label: var(--tracking-label);

  /* radius: precise. Controls 3px, containers square, overlays 6px. */
  --radius-sm: var(--radius-control);
  --radius-md: var(--radius-control);
  --radius-lg: var(--radius-overlay);
  --radius-xl: var(--radius-overlay);
}

/* Tailwind's dark: variant follows the app's explicit theme attribute, not the
 * OS directly. Apps own the attribute (and may set it from the system preference). */
@custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));