/*
 * Tailwind CSS v4 bridge for Quiet Sky.
 * Import tokens.css first. Copy this mapping into a Tailwind entry stylesheet.
 */
@theme inline {
  --color-canvas: var(--bg);
  --color-surface-1: var(--surface-1);
  --color-surface-2: var(--surface-2);
  --color-surface-3: var(--surface-3);
  --color-content-1: var(--text-1);
  --color-content-2: var(--text-2);
  --color-content-3: var(--text-3);
  --color-wash: var(--fill);
  --color-track: var(--track);
  --color-brand: var(--qs-accent);
  --color-accent-text: var(--accent-text);
  --color-accent-tint: var(--accent-tint);
  --color-accent-border: var(--accent-border);
  --color-danger: var(--danger);
  --color-danger-text: var(--danger-text);
  --color-danger-tint: var(--danger-tint);
  --color-danger-border: var(--danger-border);
  --color-ok: var(--ok);
  --color-ok-text: var(--ok-text);
  --color-ok-tint: var(--ok-tint);
  --color-ok-border: var(--ok-border);
  --color-btn-primary: var(--btn-primary-bg);
  --color-btn-primary-fg: var(--btn-primary-fg);
  --color-bubble-agent: var(--bubble-agent);
  --color-bubble-user: var(--bubble-user-bg);
  --color-bubble-user-fg: var(--bubble-user-fg);
  --color-glass: var(--glass);
  --color-focus: var(--focus-ring);
  --color-line: var(--qs-border-soft);
  --color-line-strong: var(--qs-border-strong);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --shadow-card: var(--elev-card);
  --shadow-soft: var(--elev-soft);
  --ease-brand: var(--ease-brand);
}

@theme {
  --radius-pill: 99px;
  --radius-frame: 20px;
  --radius-card: 16px;
  --radius-inner: 14px;
  --radius-ctrl: 12px;
  --radius-tight: 8px;

  --text-title-1: 28px;
  --text-title-1--line-height: 34px;
  --text-title-2: 19px;
  --text-title-2--line-height: 25px;
  --text-title-3: 15px;
  --text-title-3--line-height: 21px;
  --text-qs-body: 14px;
  --text-qs-body--line-height: 21px;
  --text-small: 13px;
  --text-small--line-height: 19px;
  --text-qs-caption: 12px;
  --text-qs-caption--line-height: 17px;
  --text-qs-micro: 11px;
  --text-qs-micro--line-height: 15px;
}

@custom-variant light ([data-theme="light"] &);