/*
 * my-tasks design tokens: the one place colours, type, spacing and radii are defined (W5).
 * Used by the SPA (web/src/styles/*.css) and by the server-rendered consent pages (pages.css).
 * Direction: a quiet working tool. Neutral surfaces, one green accent for actions, status colours only where
 * they carry meaning. Light theme for daylight desk and phone use.
 */
:root {
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Helvetica Neue", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --color-page: #ffffff;
  --color-surface: #f4f5f7;
  --color-surface-strong: #e9ebef;
  --color-border: #d5d9df;
  --color-border-strong: #aab1bb;
  --color-text: #1a1d21;
  --color-text-muted: #545c66;
  --color-accent: #0a6b4c;
  --color-accent-strong: #08573e;
  --color-accent-soft: #e3f2ec;
  --color-on-accent: #ffffff;
  --color-danger: #b3261e;
  --color-danger-soft: #fdecea;
  --color-warning: #7a4600;
  --color-warning-soft: #fff1dc;
  --color-success: #13652b;
  --color-success-soft: #e5f4e9;
  --color-focus: #1f6feb;
  --color-selection: #cfe8dd;

  --status-inbox: #545c66;
  --status-todo: #1e5aa8;
  --status-in-progress: #0a6b4c;
  --status-blocked: #b3261e;
  --status-done: #3f6b2e;
  --status-cancelled: #6b6f75;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --weight-regular: 400;
  --weight-medium: 550;
  --weight-bold: 650;

  --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;

  --radius-sm: 4px;
  --radius: 6px;
  --radius-lg: 10px;
  --shadow-raised: 0 1px 2px rgb(16 24 40 / 0.06), 0 4px 12px rgb(16 24 40 / 0.08);
  --shadow-overlay: 0 8px 24px rgb(16 24 40 / 0.18), 0 2px 6px rgb(16 24 40 / 0.08);

  --control-height: 2.75rem;
  --content-max: 72rem;
  --measure: 68ch;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--color-page);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  caret-color: var(--color-accent);
}

::selection {
  background: var(--color-selection);
  color: var(--color-text);
}

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

a {
  color: var(--color-accent-strong);
  text-underline-offset: 0.2em;
}

time,
.numeric {
  font-variant-numeric: tabular-nums;
}