/*
  3B Mailbox design tokens.
  Token NAMES are a contract shared by the app and the landing page. Change values freely, keep names.
  Contrast targets: body and muted text 7:1 (WCAG AAA) on --surface and --surface-raised.
  Large text, icons and borders of controls: at least 4.5:1 and 3:1.
  tests/unit/contrast.test.js checks the pairs listed there.
*/

:root {
  color-scheme: light dark;

  /* Type */
  --font-sans:
    ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
    'Noto Sans', sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-md: 1.0625rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: clamp(1.75rem, 1.4rem + 1.6vw, 2.25rem);
  --text-3xl: clamp(2.25rem, 1.6rem + 3vw, 3.5rem);
  --leading-tight: 1.2;
  --leading-normal: 1.55;
  --weight-normal: 400;
  --weight-medium: 550;
  --weight-bold: 700;

  /* Space (4px base) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  /* Shape */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --border-width: 1px;
  --focus-width: 3px;
  --target-min: 44px;

  /* Motion */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --duration-fast: 120ms;
  --duration-normal: 220ms;

  /* Layout */
  --content-max: 72rem;
  --reading-max: 40rem;

  /* Colour: light theme (default) */
  --surface: #fbfbfd;
  --surface-raised: #ffffff;
  --surface-sunken: #f1f2f6;
  --surface-inverse: #16181d;
  --text: #16181d;
  --text-muted: #474c58;
  --text-inverse: #fbfbfd;
  --border: #c9ccd6;
  --border-strong: #6b7080;

  --accent: #3236b8;
  --accent-hover: #262a99;
  --accent-text: #ffffff;
  --accent-soft: #e8e9fb;
  --accent-soft-text: #23268a;

  --success: #136c3a;
  --success-soft: #e3f4ea;
  --warning: #7a4a00;
  --warning-soft: #fdf0d9;
  --danger: #a1161f;
  --danger-hover: #84111a;
  --danger-soft: #fbe7e8;
  --info: #0b5880;
  --info-soft: #e1f0f8;

  --focus-ring: #1b1fa8;
  --shadow-sm: 0 1px 2px rgb(22 24 29 / 0.06), 0 1px 3px rgb(22 24 29 / 0.08);
  --shadow-md: 0 4px 12px rgb(22 24 29 / 0.08), 0 2px 4px rgb(22 24 29 / 0.06);
  --shadow-lg: 0 16px 40px rgb(22 24 29 / 0.14);
}

/* Dark theme: follows the system unless the user picks light. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --surface: #111318;
    --surface-raised: #1a1d24;
    --surface-sunken: #0b0d11;
    --surface-inverse: #eef0f5;
    --text: #eef0f5;
    --text-muted: #b8bdca;
    --text-inverse: #111318;
    --border: #353a46;
    --border-strong: #8a90a0;

    --accent: #a9acff;
    --accent-hover: #c3c5ff;
    --accent-text: #11133d;
    --accent-soft: #262a5c;
    --accent-soft-text: #d9daff;

    --success: #7fdca3;
    --success-soft: #11321f;
    --warning: #f4c46a;
    --warning-soft: #3a2a0c;
    --danger: #ff9ea4;
    --danger-hover: #ffc0c4;
    --danger-soft: #3d1418;
    --info: #8fd0f2;
    --info-soft: #0f2c3d;

    --focus-ring: #c3c5ff;
    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow-md: 0 4px 12px rgb(0 0 0 / 0.45);
    --shadow-lg: 0 16px 40px rgb(0 0 0 / 0.55);
  }
}

:root[data-theme='dark'] {
  --surface: #111318;
  --surface-raised: #1a1d24;
  --surface-sunken: #0b0d11;
  --surface-inverse: #eef0f5;
  --text: #eef0f5;
  --text-muted: #b8bdca;
  --text-inverse: #111318;
  --border: #353a46;
  --border-strong: #8a90a0;

  --accent: #a9acff;
  --accent-hover: #c3c5ff;
  --accent-text: #11133d;
  --accent-soft: #262a5c;
  --accent-soft-text: #d9daff;

  --success: #7fdca3;
  --success-soft: #11321f;
  --warning: #f4c46a;
  --warning-soft: #3a2a0c;
  --danger: #ff9ea4;
  --danger-hover: #ffc0c4;
  --danger-soft: #3d1418;
  --info: #8fd0f2;
  --info-soft: #0f2c3d;

  --focus-ring: #c3c5ff;
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow-md: 0 4px 12px rgb(0 0 0 / 0.45);
  --shadow-lg: 0 16px 40px rgb(0 0 0 / 0.55);
}

/* More contrast on request. */
@media (prefers-contrast: more) {
  :root {
    --text-muted: var(--text);
    --border: var(--border-strong);
  }
}

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