/* JAWA light and dark theme tokens.
   Component styles should use these semantic aliases. */

:root {
  color-scheme: light;

  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  --type-caption: 0.75rem;
  --type-caption-line: 1rem;
  --type-label: 0.8125rem;
  --type-label-line: 1.25rem;
  --type-body: 0.875rem;
  --type-body-line: 1.25rem;
  --type-body-lg: 1rem;
  --type-body-lg-line: 1.5rem;
  --type-section: 1.125rem;
  --type-section-line: 1.5rem;
  --type-title: 1.5rem;
  --type-title-line: 2rem;
  --type-total: 1.75rem;
  --type-total-line: 2.25rem;

  --color-canvas: #f6f6f6;
  --color-surface: #ffffff;
  --color-surface-raised: #ffffff;
  --color-text: #1b1f27;
  --color-text-muted: #6b6b6b;
  --color-border: #dddddd;
  --color-border-control: #818893;
  --color-action: #1b1f27;
  --color-on-action: #ffffff;
  --color-brand: #8c5896;
  --color-brand-fixed: #8c5896;
  --color-on-brand-fixed: #ffffff;
  --color-brand-subtle: #f2eaf4;
  --color-link: #2563eb;
  --color-focus: #2563eb;
  --color-success: #216e45;
  --color-success-bg: #e6f4ea;
  --color-warning: #7a4b12;
  --color-warning-bg: #fff4d6;
  --color-danger: #9e2a24;
  --color-danger-bg: #fde8e6;

  --radius-control: 8px;
  --radius-tile: 12px;
  --radius-card: 16px;
  --radius-pill: 999px;

  --shadow-raised: 0 1px 2px rgb(27 31 39 / 8%), 0 2px 8px rgb(27 31 39 / 6%);
  --shadow-popover: 0 4px 16px rgb(27 31 39 / 12%);
  --shadow-dialog: 0 16px 48px rgb(27 31 39 / 18%);
  --color-scrim: rgb(20 22 26 / 48%);
  --color-overlay-label: rgb(20 22 26 / 80%);
  --color-on-overlay: #ffffff;

  --motion-fast: 120ms;
  --motion-medium: 200ms;
  --motion-slow: 320ms;
  --ease-standard: cubic-bezier(.2, 0, 0, 1);

  --layer-raised: 1;
  --layer-sticky: 10;
  --layer-sheet: 40;
  --layer-skip-link: 50;

  --bg: var(--color-canvas);
  --card: var(--color-surface);
  --surface: var(--color-surface);
  --tx: var(--color-text);
  --mu: var(--color-text-muted);
  --bd: var(--color-border);
  --ac: var(--color-action);
  --act: var(--color-on-action);
  --bl: var(--color-link);
}

/* Keep this dark block identical to the explicit theme block below. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-canvas: #14161a;
    --color-surface: #1e2128;
    --color-surface-raised: #272c35;
    --color-text: #eef0f4;
    --color-text-muted: #aab2c0;
    --color-border: #3c4350;
    --color-border-control: #8994a5;
    --color-action: #eef0f4;
    --color-on-action: #14161a;
    --color-brand: #d6ace0;
    --color-brand-subtle: #35273c;
    --color-link: #73a7ff;
    --color-focus: #73a7ff;
    --color-success: #8dd9a9;
    --color-success-bg: #17382a;
    --color-warning: #f5d38a;
    --color-warning-bg: #3e321c;
    --color-danger: #ffb4ab;
    --color-danger-bg: #482321;
    --shadow-raised: 0 1px 2px rgb(0 0 0 / 40%), 0 2px 8px rgb(0 0 0 / 28%);
    --shadow-popover: 0 4px 16px rgb(0 0 0 / 32%);
    --shadow-dialog: 0 16px 48px rgb(0 0 0 / 48%);
    --color-scrim: rgb(0 0 0 / 62%);
    --color-overlay-label: rgb(0 0 0 / 72%);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --color-canvas: #14161a;
  --color-surface: #1e2128;
  --color-surface-raised: #272c35;
  --color-text: #eef0f4;
  --color-text-muted: #aab2c0;
  --color-border: #3c4350;
  --color-border-control: #8994a5;
  --color-action: #eef0f4;
  --color-on-action: #14161a;
  --color-brand: #d6ace0;
  --color-brand-subtle: #35273c;
  --color-link: #73a7ff;
  --color-focus: #73a7ff;
  --color-success: #8dd9a9;
  --color-success-bg: #17382a;
  --color-warning: #f5d38a;
  --color-warning-bg: #3e321c;
  --color-danger: #ffb4ab;
  --color-danger-bg: #482321;
  --shadow-raised: 0 1px 2px rgb(0 0 0 / 40%), 0 2px 8px rgb(0 0 0 / 28%);
  --shadow-popover: 0 4px 16px rgb(0 0 0 / 32%);
  --shadow-dialog: 0 16px 48px rgb(0 0 0 / 48%);
  --color-scrim: rgb(0 0 0 / 62%);
  --color-overlay-label: rgb(0 0 0 / 72%);
}