/* Design tokens for the Pilates One Carcin Site.
 *
 * ONE :root BLOCK, ON PURPOSE. The Worker (src/index.js) reads the token
 * names for /api/theme out of the FIRST `:root{...}` in this file, and injects
 * a second :root after the stylesheets at request time to override them. So:
 *   - every token the theme layer may change lives in this block, and
 *   - nothing else in this file may open a `:root{` before it.
 * Values accepted by the theme API are colours and lengths only, which is why
 * font stacks and shadows are defined in site.css rather than here.
 *
 * Naming: --color-*, --font-size-*, --space-*, --radius-*, --z-*. The six
 * original names (--primary, --muted, --text, --background, --surface,
 * --border) are kept as the stable public API — chat edits written against
 * them keep working — and the new names alias them.
 */

:root {
  /* Brand colour */
  --primary: #9c2520;
  --primary-deep: #7f1d19;
  --navy: #2a2e40;
  --leaf: #7e9377;          /* the sage of the studio's plants; the flying mark */

  /* Text */
  --text: #1c1c1c;
  --heading: #333333;
  --muted: #666666;
  --on-dark: #ffffff;

  /* Surfaces */
  --background: #ffffff;
  --surface: #f6f4f1;
  --surface-deep: #ece8e2;
  --border: #e4e0da;

  /* Aliases (new naming, same values) */
  --color-primary: var(--primary);
  --color-primary-deep: var(--primary-deep);
  --color-navy: var(--navy);
  --color-text: var(--text);
  --color-heading: var(--heading);
  --color-muted: var(--muted);
  --color-on-dark: var(--on-dark);
  --color-bg: var(--background);
  --color-surface: var(--surface);
  --color-surface-deep: var(--surface-deep);
  --color-border: var(--border);

  /* Type scale (fluid). Display = Oswald, soft = Poppins, body = Oxygen. */
  --font-size-xs: 0.75rem;     /* 12 */
  --font-size-sm: 0.875rem;    /* 14 */
  --font-size-base: 1rem;      /* 16 */
  --font-size-md: 1.125rem;    /* 18 */
  --font-size-lg: clamp(1.25rem, 1.05rem + 0.9vw, 1.625rem);   /* 20-26 */
  --font-size-xl: clamp(1.625rem, 1.3rem + 1.5vw, 2.25rem);    /* 26-36 */
  --font-size-2xl: clamp(1.875rem, 1.35rem + 2.6vw, 3.25rem);  /* 30-52 */
  --font-size-3xl: clamp(2rem, 1.3rem + 3.6vw, 3.75rem);       /* 32-60 */

  /* Spacing scale, 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;
  --space-9: 6rem;

  /* Section rhythm and container */
  --section-y: clamp(3.5rem, 3rem + 3vw, 6rem);
  --container: 75rem;              /* 1200 */
  --container-narrow: 46rem;       /* 736, ~68ch of Oxygen 16 */
  --gutter: clamp(1.25rem, 4vw, 3rem);

  /* Radii */
  --radius-sm: 3px;
  --radius: 6px;
  --radius-lg: 10px;

  /* Layers. The flying mark sits between section backgrounds (0) and page
     content (2), so it passes behind headings and cards rather than over them. */
  --z-fly: 1;
  --z-content: 2;
  --z-nav: 50;
  --z-dropdown: 60;
  --z-overlay: 100;

  /* Chrome */
  --nav-height: 5.5rem;
  --topbar-height: 2.25rem;
}