/* ============================================================
   00-settings.css
   :root custom properties — colors, fonts, spacing, layout
   Phase 1: skeleton only. Phase 2: replace hardcoded values
   with var() references file-by-file.
   ============================================================ */

:root {
  /* Brand Colors */
  --color-primary: #4c8a9c;
  --color-text: #231f20;
  --color-text-light: #737373;
  --color-white: #fff;
  --color-bg: #fafafa;
  --color-border: #798570;

  /* Fonts */
  --font-body: "GothamSSm", sans-serif;
  --font-heading: "GothamSSm", sans-serif;
  --font-nav: "GothamSSm", sans-serif;

 /* Spacing — fluid, viewport-width-based, clamped to sane bounds.
     Formula matches the fluid-type pattern: scales between 576px and 1440px viewport.
     Use logical properties (padding-block, margin-inline) when applying. */
  --spacing-xs:  clamp(4px,  calc(4px  + (8   - 4)  * ((100vw - 576px) / (1440 - 576))), 8px);
  --spacing-sm:  clamp(8px,  calc(8px  + (16  - 8)  * ((100vw - 576px) / (1440 - 576))), 16px);
  --spacing-md:  clamp(16px, calc(16px + (28  - 16) * ((100vw - 576px) / (1440 - 576))), 28px);
  --spacing-lg:  clamp(24px, calc(24px + (56  - 24) * ((100vw - 576px) / (1440 - 576))), 56px);
  --spacing-xl:  clamp(48px, calc(48px + (96  - 48) * ((100vw - 576px) / (1440 - 576))), 96px);
  --spacing-2xl: clamp(72px, calc(72px + (144 - 72) * ((100vw - 576px) / (1440 - 576))), 144px);

  /* Layout */
  --row-max: 1375px;
  --row-narrow: 1150px;

  /* Transitions */
  --transition-fast: 0.3s ease;
  --transition-med: 0.5s ease;
}