/* Last Time design tokens. Source of truth: docs/brand/tokens.json.
   Contrast ratios (WCAG 2.2) are listed in docs/brand/DESIGN_SYSTEM.md. */

:root {
  color-scheme: light dark;

  /* Colour, light */
  --color-bg: #FFFFFF;
  --color-surface: #FFFFFF;
  --color-surface-alt: #F2F2F7;
  --color-surface-raised: #FFFFFF;
  --color-ink: #1D1D1F;
  --color-ink-secondary: #6E6E73;
  --color-border-strong: #8E8E93;
  --color-separator: #E5E5EA;
  --color-accent: #0A7C72;
  --color-accent-pressed: #086158;
  --color-on-accent: #FFFFFF;
  --color-accent-line: rgba(10, 124, 114, 0.45);
  --color-focus: #0A7C72;
  --color-phone-bezel: #1D1D1F;

  /* Type */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", system-ui, sans-serif;
  --text-display: clamp(2.5rem, 1.6rem + 3.2vw, 4rem);      /* 40 → 64 */
  --text-title: clamp(2rem, 1.7rem + 1.1vw, 2.5rem);        /* 32 → 40 */
  --text-heading: clamp(1.375rem, 1.3rem + 0.3vw, 1.5rem);  /* 22 → 24 */
  --text-body-lg: clamp(1.125rem, 1.08rem + 0.2vw, 1.25rem);/* 18 → 20 */
  --text-body: clamp(1.0625rem, 1.04rem + 0.1vw, 1.125rem); /* 17 → 18 */
  --text-small: 0.9375rem;                                   /* 15 */
  --text-caption: 0.8125rem;                                 /* 13 */
  --leading-tight: 1.05;
  --leading-title: 1.1;
  --leading-heading: 1.3;
  --leading-body: 1.5;
  --tracking-tight: -0.02em;
  --weight-regular: 400;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Spacing, 4/8 grid */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* Radius: rounded rectangles, never pills */
  --radius-sm: 6px;
  --radius-control: 10px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-phone: 44px;

  /* Elevation */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 1px rgba(0, 0, 0, 0.04);
  --shadow-2: 0 12px 32px rgba(0, 0, 0, 0.10), 0 2px 6px rgba(0, 0, 0, 0.06);

  /* Motion */
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);

  /* Layout */
  --target-min: 44px;
  --control-height: 48px;
  --page-max: 1200px;
  --gutter: 24px;
}

@media (max-width: 480px) {
  :root { --gutter: 16px; }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #000000;
    --color-surface: #1C1C1E;
    --color-surface-alt: #1C1C1E;
    --color-surface-raised: #2C2C2E;
    --color-ink: #F5F5F7;
    --color-ink-secondary: #98989D;
    --color-border-strong: #8E8E93;
    --color-separator: #38383A;
    --color-accent: #3CC7B6;
    --color-accent-pressed: #6FD9CB;
    --color-on-accent: #000000;
    --color-accent-line: rgba(60, 199, 182, 0.45);
    --color-focus: #3CC7B6;
    --color-phone-bezel: #3A3A3C;
    --shadow-1: none;
    --shadow-2: none;
  }
}

:root[data-theme="dark"] {
  --color-bg: #000000;
  --color-surface: #1C1C1E;
  --color-surface-alt: #1C1C1E;
  --color-surface-raised: #2C2C2E;
  --color-ink: #F5F5F7;
  --color-ink-secondary: #98989D;
  --color-border-strong: #8E8E93;
  --color-separator: #38383A;
  --color-accent: #3CC7B6;
  --color-accent-pressed: #6FD9CB;
  --color-on-accent: #000000;
  --color-accent-line: rgba(60, 199, 182, 0.45);
  --color-focus: #3CC7B6;
  --color-phone-bezel: #3A3A3C;
  --shadow-1: none;
  --shadow-2: none;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
  }
}