/* =========================================================
   CC: ccg-tokens.css - the brand-neutral design values (neutrals, status colours, sizes, gaps, corners).
   CC: Brand colours and fonts are NOT here: they live in css/brands/<brand>.css, chosen by _BRAND_ (config).
   CC: ccg-theme.css uses only these values and the brand file's. Both files are linked by
   CC: templates/shared/theme-tokens.phtml. See docs/theme/THEME_README.md.
   ========================================================= */

:root {
  /* CC: ---- Neutrals ---- */
  --ink: #1C1A1F;           /* CC: headings, strongest text - 17:1 on white */
  --text: #34303A;          /* CC: body text - 12:1 on white */
  --muted: #5F5A64;         /* CC: helper text, captions - 6.6:1 on white, 6.0:1 on canvas */
  --border-strong: #85808A; /* CC: input borders (controls need 3:1) - 3.8:1 on white */
  --border: #E1DDE0;        /* CC: dividers and card edges (decorative only) */
  --canvas: #F5F3F2;        /* CC: page background behind cards */
  --surface: #FFFFFF;       /* CC: cards, inputs */
  --on-brand: #FFFFFF;      /* CC: text on the brand colour */

  /* CC: ---- Status colours ---- */
  --success-700: #1E7A4C;  --success-100: #E7F4EC;
  --warning-700: #8A5A00;  --warning-100: #FDF3DC;
  --danger-700:  #B42318;  --danger-100:  #FDECEA;
  /* CC: --info-700 / --info-100 are brand colours - see css/brands/<brand>.css */

  /* CC: ---- Fonts: --font-heading / --font-ui / --font-body are set by css/brands/<brand>.css ---- */

  /* CC: ---- Type scale (rem; 1rem = 16px) ---- */
  --text-xs:   0.8125rem;                                  /* 13px */
  --text-sm:   0.9375rem;                                  /* 15px */
  --text-base: 1.0625rem;                                  /* 17px */
  --text-lg:   1.25rem;                                    /* 20px */
  --text-xl:   clamp(1.375rem, 1.2rem + 0.8vw, 1.625rem);  /* 22-26px */
  --text-2xl:  clamp(1.75rem, 1.4rem + 1.5vw, 2.25rem);    /* 28-36px */
  --text-3xl:  clamp(2.125rem, 1.6rem + 2.4vw, 3rem);      /* 34-48px */

  --leading-tight: 1.2;
  --leading-body: 1.6;

  /* CC: ---- Spacing (4px base) ---- */
  --space-1: 0.25rem;  /* 4  */
  --space-2: 0.5rem;   /* 8  */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.5rem;   /* 24 */
  --space-6: 2rem;     /* 32 */
  --space-7: 3rem;     /* 48 */
  --space-8: 4rem;     /* 64 */
  --space-9: 6rem;     /* 96 */

  /* CC: ---- Shape ---- */
  --radius-sm: 6px;    /* CC: inputs, small buttons */
  --radius-md: 10px;   /* CC: buttons, alerts */
  --radius-lg: 16px;   /* CC: cards */
  --radius-pill: 999px;

  /* CC: ---- Elevation (used sparingly) ---- */
  /* CC: tinted with the brand's --shadow-colour / --brand-600, so a new brand only sets those two */
  --shadow-card: 0 1px 2px color-mix(in srgb, var(--shadow-colour) 5%, transparent),
                 0 4px 16px color-mix(in srgb, var(--shadow-colour) 6%, transparent);
  --shadow-raised: 0 2px 4px color-mix(in srgb, var(--shadow-colour) 8%, transparent),
                   0 12px 32px color-mix(in srgb, var(--shadow-colour) 12%, transparent);
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--brand-600) 25%, transparent);

  /* CC: ---- Layout ---- */
  --width-form: 60rem;     /* CC: 960px - content card. Wider than the guide's 720px: see THEME_README */
  --width-page: 72rem;     /* CC: 1152px - header/footer inner width */
  --gutter: clamp(1rem, 4vw, 2rem);
  --control-height: 3rem;  /* CC: 48px - inputs and buttons */
  /* CC: --header-logo-height is set by css/brands/<brand>.css (it depends on the logo's shape) */

  /* CC: ---- Motion ---- */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --duration-fast: 120ms;
  --duration: 200ms;
}

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