/* MSOFx design tokens — "The Prepared Environment".
   Palette + type drawn from the Montessori material set: precise gradation,
   color-coded domains, natural wood, gallery restraint.
   All site CSS uses these tokens; no raw hex outside this file. */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&family=Hanken+Grotesk:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

:root {
  /* --- neutrals (warm paper, gallery, ink) --- */
  --bg: #F4F0E8;            /* warm paper ground */
  --surface: #FCFAF6;       /* raised cards, panels */
  --surface-2: #ECE6DA;     /* sand, alternating sections */
  --ink: #26221C;           /* body text */
  --ink-soft: #6A6155;      /* secondary text, captions */
  --text-strong: #17140F;   /* headings */
  --line: #DED6C7;          /* hairlines, borders */
  --white: #FFFFFF;         /* stays #FFF; on dark/accent surfaces only */

  /* --- ink surfaces (deep, for light/dark rhythm) --- */
  --deep: #1F3A2E;          /* forest espresso, dark sections + hero anchor */
  --deep-2: #17352A;        /* deeper forest */
  --on-deep: #F1ECE1;       /* text on deep surfaces */
  --on-deep-soft: #A9BBB0;  /* muted text on deep */

  /* --- material accents (the ownable palette; used with restraint,
         one "keyed" color per section, like color-coded shelves) --- */
  --rose: #D08A92;          /* Pink Tower */
  --rose-inta: #8E4A50;     /* accessible rose text on paper */
  --brick: #B4472F;         /* Red Rods */
  --gold: #B9822B;          /* Golden Beads (4.5:1 on paper) */
  --sky: #5E86A6;           /* Number Rods blue */
  --sky-ink: #3C5D77;       /* accessible sky text */
  --cypress: #2E5C45;       /* primary green (nature, growth) */

  /* semantic accent = cypress by default; sections re-key via --key */
  --accent: var(--cypress);
  --accent-strong: #234b38;
  --accent-soft: #E4EDE4;
  --key: var(--cypress);            /* per-section keyed material color */
  --key-soft: #E4EDE4;              /* soft wash of the keyed color */

  /* --- type --- */
  --font-display: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Hanken Grotesk', 'Segoe UI', system-ui, sans-serif;
  --font-alt: 'Plus Jakarta Sans', system-ui, sans-serif;   /* labels, UI, buttons */

  /* --- fluid type scale --- */
  --fs-display: clamp(2.9rem, 6.2vw, 5.6rem);
  --fs-h1: clamp(2.3rem, 4.6vw, 3.7rem);
  --fs-h2: clamp(1.7rem, 3.1vw, 2.5rem);
  --fs-h3: 1.3rem;
  --fs-lede: clamp(1.12rem, 1.6vw, 1.4rem);
  --fs-body: 1.12rem;
  --fs-label: 0.76rem;

  /* --- space --- */
  --space-1: 4px;  --space-2: 8px;   --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px;  --space-7: 48px; --space-8: 64px;
  --space-9: 80px; --space-10: 104px; --space-11: 136px; --space-12: 176px;

  /* --- shape + elevation (warm-tinted, soft) --- */
  --radius: 8px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --shadow-1: 0 2px 8px rgba(40, 32, 20, 0.06), 0 1px 2px rgba(40, 32, 20, 0.05);
  --shadow-2: 0 18px 44px rgba(40, 32, 20, 0.13), 0 4px 12px rgba(40, 32, 20, 0.07);
  --shadow-key: 0 16px 40px color-mix(in srgb, var(--key) 26%, transparent);

  /* --- layout + motion --- */
  --container: 1180px;
  --measure: 66ch;
  --dur-fast: 180ms;
  --dur-med: 320ms;
  --dur-slow: 620ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}