/* Design tokens. The ONLY file where colour literals (hex, rgb) are allowed.
   Palette: warm stone neutrals, near-black ink primary, one petrol accent for
   links, focus and "you are here". Semantic colours are muted on purpose. */
:root {
  color-scheme: light dark;

  /* Neutrals: warm stone */
  --color-bg: #f6f5f2;
  --color-surface: #ffffff;
  --color-surface-sunken: #efede9;
  --color-border: #e6e3dd;          /* hairline separator, decorative */
  --color-border-strong: #8a847a;   /* control edges, >= 3:1 */
  --color-text: #1b1a17;
  --color-text-muted: #5d5850;

  /* Primary action: ink. Accent: petrol, used sparingly. */
  --color-primary: #1b1a17;
  --color-primary-hover: #38352f;
  --color-on-primary: #ffffff;
  --color-accent: #1f5f66;
  --color-accent-hover: #174b51;
  --color-accent-subtle: #e1edee;
  --color-on-accent: #ffffff;
  --color-focus: #1f5f66;

  /* Semantic: the solid colour doubles as readable text on its subtle tint */
  --color-success: #2c6a3d;
  --color-success-subtle: #e3eee5;
  --color-warn: #86560f;
  --color-warn-subtle: #f5ead3;
  --color-danger: #a8362e;
  --color-danger-hover: #8c2b25;
  --color-danger-subtle: #f6e2df;
  --color-on-danger: #ffffff;

  /* Inverse surface (toast) */
  --color-inverse-bg: #23211e;
  --color-inverse-text: #f6f5f2;

  --color-scrim: rgb(27 26 23 / 0.38);

  /* Depth: layered, low-opacity, for elevated surfaces only */
  --shadow-1: 0 1px 1px rgb(27 26 23 / 0.03), 0 2px 4px rgb(27 26 23 / 0.03), 0 8px 20px -6px rgb(27 26 23 / 0.06);
  --shadow-2: 0 2px 4px rgb(27 26 23 / 0.04), 0 12px 24px -6px rgb(27 26 23 / 0.10), 0 36px 72px -18px rgb(27 26 23 / 0.18);
  --shadow-press: inset 0 1px 0 rgb(255 255 255 / 0.14), 0 1px 2px rgb(27 26 23 / 0.22);

  /* Spacing: 4px scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;

  /* Radius: 6 / 10 / 16 / pill */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-full: 999px;

  /* Type: system stack only, no downloads. Display cut for headings. */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.875rem;
  --text-3xl: 2.5rem;
  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-normal: 1.55;
  --tracking-display: -0.028em;
  --tracking-heading: -0.016em;
  --tracking-label: 0.01em;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  --control-height: 2.5rem;
  --content-width: 64rem;
  --focus-ring-width: 2px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #141311;
    --color-surface: #1c1b19;
    --color-surface-sunken: #100f0e;
    --color-border: #2c2a27;
    --color-border-strong: #7f796f;
    --color-text: #f1eee8;
    --color-text-muted: #a39d93;

    --color-primary: #f1eee8;
    --color-primary-hover: #ffffff;
    --color-on-primary: #1b1a17;
    --color-accent: #84c3c8;
    --color-accent-hover: #a0d2d6;
    --color-accent-subtle: #162a2c;
    --color-on-accent: #0c2123;
    --color-focus: #84c3c8;

    --color-success: #86c898;
    --color-success-subtle: #15291b;
    --color-warn: #e0b062;
    --color-warn-subtle: #2e2410;
    --color-danger: #f0958c;
    --color-danger-hover: #f5aea7;
    --color-danger-subtle: #351b18;
    --color-on-danger: #2a0e0b;

    --color-inverse-bg: #f1eee8;
    --color-inverse-text: #1b1a17;

    --color-scrim: rgb(0 0 0 / 0.6);
    --shadow-1: 0 1px 1px rgb(0 0 0 / 0.3), 0 8px 20px -6px rgb(0 0 0 / 0.4);
    --shadow-2: 0 2px 4px rgb(0 0 0 / 0.3), 0 16px 32px -8px rgb(0 0 0 / 0.5), 0 40px 80px -20px rgb(0 0 0 / 0.6);
    --shadow-press: inset 0 1px 0 rgb(255 255 255 / 0.5), 0 1px 2px rgb(0 0 0 / 0.4);
  }
}