/* ==========================================================================
   ROCKLAND — DESIGN TOKENS
   Canonical brand colours are preserved exactly as supplied.
   Supporting values are derived so the brand tones can behave as a system.
   ========================================================================== */

:root {
  /* ---------- Brand (canonical) ---------- */
  --brand-green: #0a3b22;
  --brand-navy: #0b1b3d;
  --brand-ruby: #7a0016;

  /* ---------- Surfaces ---------- */
  --surface: #f4f1ea;          /* page — warm limestone paper */
  --surface-raised: #faf8f3;   /* cards, panels */
  --surface-sunk: #e9e4d9;     /* inset blocks */
  --surface-dark: #070f1e;     /* deepest — footer, hero scrim */
  --surface-navy: var(--brand-navy);
  --surface-green: var(--brand-green);

  /* ---------- Ink ---------- */
  --ink: #0e1319;
  --ink-secondary: #3b424b;
  --ink-muted: #61686f;
  --ink-on-dark: #efeade;
  --ink-on-dark-secondary: #b3b9c2;
  --ink-on-dark-muted: #8d95a1;

  /* ---------- Accent ---------- */
  --accent: var(--brand-ruby);
  --ruby: var(--brand-ruby);
  --accent-on-dark: #e8748a;   /* ruby lifted onto navy */
  --accent-on-green: #f090a1;  /* ruby lifted further onto forest */
  --ruby-bright: var(--accent-on-dark);
  --green-bright: #2f7a52;

  /* ---------- Lines ---------- */
  --line: #d9d3c5;
  --line-strong: #bdb4a2;
  --line-dark: rgb(239 234 222 / 0.14);
  --line-dark-strong: rgb(239 234 222 / 0.28);

  /* ---------- States ---------- */
  --focus-ring: var(--brand-ruby);
  --focus-ring-dark: #f0c9cf;
  --selection-bg: #e8d6d0;

  /* ---------- Typography ---------- */
  --font-sans: "Inter Tight", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Newsreader", ui-serif, Georgia, "Times New Roman", serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono",
    Menlo, Consolas, monospace;

  /* Fluid scale: min at 360px, max at 1440px */
  --text-display: clamp(2.85rem, 1.15rem + 6.6vw, 6.75rem);
  --text-h2: clamp(1.9rem, 1.25rem + 2.6vw, 3.4rem);
  --text-h3: clamp(1.25rem, 1.12rem + 0.55vw, 1.5rem);
  --text-h4: 1.0625rem;
  --text-body-lg: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  --text-body: clamp(1rem, 0.97rem + 0.12vw, 1.0625rem);
  --text-sm: 0.875rem;
  --text-xs: 0.8125rem;
  --text-micro: 0.6875rem;

  --leading-display: 0.94;
  --leading-h2: 1.04;
  --leading-h3: 1.25;
  --leading-body: 1.62;
  --leading-snug: 1.45;

  --tracking-display: -0.035em;
  --tracking-h2: -0.024em;
  --tracking-h3: -0.012em;
  --tracking-micro: 0.14em;
  --tracking-label: 0.08em;

  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semi: 600;

  /* ---------- Space (4px base) ---------- */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 8rem;
  --s-11: 10rem;

  --section-y: clamp(4.5rem, 2.5rem + 7vw, 9rem);
  --section-y-tight: clamp(3rem, 2rem + 4vw, 5.5rem);

  /* ---------- Layout ---------- */
  --container-max: 1480px;
  --container-pad: clamp(1.25rem, 0.6rem + 3vw, 4rem);
  --gutter: clamp(1rem, 0.6rem + 1.6vw, 2rem);
  --measure: 62ch;
  --measure-tight: 46ch;
  --header-h: 72px;

  /* ---------- Radius ---------- */
  --radius-xs: 2px;
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  /* ---------- Elevation ---------- */
  --shadow-xs: 0 1px 2px rgb(14 19 25 / 0.05);
  --shadow-sm: 0 2px 10px -2px rgb(14 19 25 / 0.1);
  --shadow-md: 0 16px 40px -18px rgb(14 19 25 / 0.28);
  --shadow-glass: 0 1px 0 0 rgb(239 234 222 / 0.08) inset,
    0 20px 50px -30px rgb(0 0 0 / 0.6);

  /* ---------- Glass ---------- */
  --glass-bg: rgb(8 15 29 / 0.55);
  --glass-bg-strong: rgb(8 15 29 / 0.86);
  --glass-border: rgb(239 234 222 / 0.16);
  --glass-blur: saturate(150%) blur(22px);

  /* ---------- Motion ---------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 140ms;
  --dur: 260ms;
  --dur-slow: 620ms;

  /* ---------- Layers ---------- */
  --z-base: 0;
  --z-raised: 10;
  --z-header: 100;
  --z-drawer: 200;
  --z-skip: 300;

  color-scheme: light;
}

@media (max-width: 720px) {
  :root {
    --header-h: 62px;
  }
}