/* ============================================================
   DESIGN TOKENS
   The single source of truth for colour, type, spacing, radius.
   Nothing elsewhere in the CSS should use a raw hex value.
   ============================================================ */

:root {
  /* --- Typeface ------------------------------------------------
     One family only. Atkinson Hyperlegible was designed for
     readability (distinct letterforms, open apertures), which is
     the right call for a product built around low cognitive load. */
  --font-ui: "Atkinson Hyperlegible", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* --- Type scale (1.25 ratio, capped so headings don't eat
         mobile screen space) ------------------------------------ */
  --text-xs: 0.75rem;    /* 12px - helper text */
  --text-sm: 0.8125rem;  /* 13px - labels, meta */
  --text-base: 0.9375rem;/* 15px - body */
  --text-md: 1.0625rem;  /* 17px - card heading */
  --text-lg: 1.3125rem;  /* 21px - section heading */
  --text-xl: 1.625rem;   /* 26px - page title */
  --text-2xl: 2.0625rem; /* 33px - the one hero line (Start Here) */

  --leading-tight: 1.25;
  --leading-normal: 1.55;
  --leading-loose: 1.7;

  --weight-normal: 400;
  --weight-bold: 700;

  /* --- Spacing (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;

  /* --- Radius: small and restrained, not pill-shaped everything - */
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 10px;

  /* --- Layout -------------------------------------------------- */
  --reading-width: 38rem;      /* keeps line length under ~72 chars */
  --sidebar-width: 15rem;
  --rail-width: 4.5rem;
  --bottom-nav-height: 4rem;
  --touch-min: 44px;           /* minimum comfortable touch target */

  /* --- Motion -------------------------------------------------- */
  --ease: cubic-bezier(0.2, 0, 0.2, 1);
  --speed: 140ms;
}

/* ============================================================
   LIGHT THEME (default)
   A pale limestone canvas rather than white: less glare, and its
   faint green-grey undertone sits with the ink-teal brand colour.
   ============================================================ */
:root,
[data-theme="light"] {
  --canvas: #f2f4f1;
  --surface: #ffffff;
  --surface-sunken: #e8ece7;
  --surface-hover: #f6f8f5;

  --line: #d7ded8;        /* hairline borders */
  --line-strong: #b9c3bb; /* dividers that carry meaning */

  --ink: #1b2420;         /* primary text */
  --ink-secondary: #515c56;
  --ink-muted: #76817b;
  --ink-inverse: #ffffff;

  --brand: #0f5e57;       /* ink teal - the one brand colour */
  --brand-hover: #0b4640;
  --brand-soft: #dcebe8;
  --brand-ring: #0f5e57;

  --accent: #9c6212;      /* amber - Start Here and current focus ONLY */
  --accent-soft: #f6ecda;
  --accent-line: #d9a94f;

  --success: #2c6639;
  --success-soft: #e0eddf;
  --warning: #825b0d;
  --warning-soft: #f6eed8;
  --danger: #973a30;
  --danger-soft: #f6e4e1;

  --shadow-panel: 0 1px 2px rgba(27, 36, 32, 0.06);
  color-scheme: light;
}

/* ============================================================
   DARK THEME
   ============================================================ */
[data-theme="dark"] {
  --canvas: #111614;
  --surface: #191f1c;
  --surface-sunken: #0d1211;
  --surface-hover: #212825;

  --line: #2b332f;
  --line-strong: #3d4742;

  --ink: #e6ebe7;
  --ink-secondary: #a3aea8;
  --ink-muted: #7d8883;
  --ink-inverse: #111614;

  --brand: #66b8ac;
  --brand-hover: #82c8bd;
  --brand-soft: #1b2e2b;
  --brand-ring: #66b8ac;

  --accent: #dba75c;
  --accent-soft: #2b2419;
  --accent-line: #8a6a33;

  --success: #7cc08a;
  --success-soft: #1a2a1e;
  --warning: #d7b06a;
  --warning-soft: #2a2418;
  --danger: #e08a7e;
  --danger-soft: #2e1e1c;

  --shadow-panel: 0 1px 2px rgba(0, 0, 0, 0.3);
  color-scheme: dark;
}

/* Follow the device setting when the user has not chosen a theme. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --canvas: #111614;
    --surface: #191f1c;
    --surface-sunken: #0d1211;
    --surface-hover: #212825;
    --line: #2b332f;
    --line-strong: #3d4742;
    --ink: #e6ebe7;
    --ink-secondary: #a3aea8;
    --ink-muted: #7d8883;
    --ink-inverse: #111614;
    --brand: #66b8ac;
    --brand-hover: #82c8bd;
    --brand-soft: #1b2e2b;
    --brand-ring: #66b8ac;
    --accent: #dba75c;
    --accent-soft: #2b2419;
    --accent-line: #8a6a33;
    --success: #7cc08a;
    --success-soft: #1a2a1e;
    --warning: #d7b06a;
    --warning-soft: #2a2418;
    --danger: #e08a7e;
    --danger-soft: #2e1e1c;
    --shadow-panel: 0 1px 2px rgba(0, 0, 0, 0.3);
    color-scheme: dark;
  }
}