@import 'tailwindcss' source(none);
@import './styles.css';

@source '../index.html';
@source './**/*.{ts,tsx}';

@custom-variant dark (&:where([data-theme='dark'], [data-theme='dark'] *));

/* Inline aliases keep utilities tied to the active light/dark design tokens. */
@theme inline {
  --color-canvas: var(--bg-accent);
  --color-panel: var(--panel);
  --color-panel-soft: var(--panel-soft);
  --color-panel-muted: var(--panel-muted);
  --color-line: var(--line);
  --color-line-soft: var(--line-soft);
  --color-ink: var(--text);
  --color-muted: var(--muted);
  --color-muted-strong: var(--muted-strong);
  --color-brand: var(--primary);
  --color-brand-hover: var(--primary-hover);
  --color-brand-strong: var(--primary-strong);
  --color-danger: var(--danger);

  --shadow-soft: var(--shadow-sm);
  --shadow-panel: var(--shadow-md);
  --shadow-elevated: var(--shadow-lg);

  --font-sans: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;

  /* Preserve utility radii independently of tokens.css's --radius-* names. */
  --radius-xs: 0.125rem;
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-2xl: 1rem;
  --radius-3xl: 1.5rem;

  /* Keep line heights fixed when component styles override the font size. */
  --text-xs--line-height: 1rem;
  --text-sm--line-height: 1.25rem;
  --text-base--line-height: 1.5rem;
  --text-lg--line-height: 1.75rem;
  --text-xl--line-height: 1.75rem;
  --text-2xl--line-height: 2rem;
  --text-3xl--line-height: 2.25rem;
  --text-4xl--line-height: 2.5rem;
}

/* Retain the v3 defaults where components do not set their own values. */
@layer base {
  *,
  ::before,
  ::after,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-gray-200, currentColor);
  }

  input::placeholder,
  textarea::placeholder {
    color: var(--color-gray-400);
  }

  button:not(:disabled),
  [role='button']:not(:disabled) {
    cursor: pointer;
  }
}