/* ============================================================
   OpenUp — Global design system (v2, "MergeUp" redesign)

   The one stylesheet every page shares. Loaded by BaseLayout on
   every page of the site, BEFORE the legacy WordPress CSS, so any
   same-named declaration in the legacy sheets still wins and the
   live-parity pages cannot change by loading this file.

   STATUS: tokens only. This file declares CSS custom properties and
   nothing else — no element or class selectors — so it has zero
   visual effect until a template consumes a token. As redesigned
   templates roll out (starting from the new homepage), their
   component CSS graduates into this file and reads these tokens.

   PROVENANCE — reconciled from the homepage-v7 design system
   (PR #103, /lp/home-v7/, Figma "MergeUp" node 1982-416739):
     foundation.css  → type scale, line-height, tracking, spacing
     styles.css      → brand palette, semantic roles, shape, layout
     v7-chrome.css   → slate + on-navy text roles, navy gradient,
                       soft elevation (v7 superseded the earlier
                       "no shadows" rule with these two soft steps)

   Naming: brand/semantic/shape/layout tokens carry the --ou- prefix
   (inert against the WP theme + Tailwind vendor CSS). The type and
   spacing scales keep their foundation.css names (--fs-*, --lh-*,
   --ls-*, --space-*): collision-checked against every vendored
   sheet, and unchanged names let the v7 component CSS drop in as-is.
   ============================================================ */

:root {
  /* ---------- BRAND PALETTE ---------- */
  --ou-green-500: #00A885;   /* primary green            */
  --ou-green-600: #0C8E77;   /* green, pressed/hover     */
  --ou-blue-500:  #48B4FF;   /* primary light blue       */
  --ou-blue-600:  #3BA5EE;   /* blue, pressed/hover      */
  --ou-blue-a11y: #0075C7;   /* same-hue dark step: light blue fails 4.5:1 on text */
  --ou-navy:      #152361;   /* primary dark blue (indigo-800)   */
  --ou-navy-2:    #0E1949;   /* secondary dark blue (indigo-900) */

  /* Neutrals */
  --ou-black:       #333333; /* body text on light       */
  --ou-slate:       #5B6590; /* slate-700 — secondary text (69 production uses) */
  --ou-slate-200:   #E8E9EF;
  --ou-slate-100:   #F3F4F7;
  --ou-skin:        #FFF8ED; /* primary skin (offwhite-100)   */
  --ou-offwhite-50: #FFFDFB;
  --ou-beige:       #F4EAE0;
  --ou-white:       #FFFFFF;

  /* Navy surfaces render as a gradient, snapped to brand values */
  --ou-grad-navy: linear-gradient(165deg, #17275F 0%, #0E1949 100%);

  /* ---------- SEMANTIC ROLES ---------- */
  --ou-text:       var(--ou-black);
  --ou-text-muted: var(--ou-slate);
  --ou-heading:    var(--ou-navy);
  --ou-link:       var(--ou-blue-500);

  /* On-navy text: three roles, not ad-hoc opacities */
  --ou-on-navy-strong: #FFFFFF;                 /* headlines, numbers          */
  --ou-on-navy-body:   rgba(255,255,255,.85);   /* anything read as a sentence */
  --ou-on-navy-quiet:  rgba(255,255,255,.65);   /* captions, legal, labels     */

  /* ---------- TYPE FACES ---------- */
  /* Same faces as fonts.css; the metric-matched fallbacks keep the swap reflow-free */
  --ou-font-serif: "Noto Serif JP", "Noto Serif JP Fallback", serif;
  --ou-font-sans: "Montserrat", "Montserrat Fallback", sans-serif;

  /* ---------- TYPE SCALE ---------- (level → size ; fluid where noted)
     Body copy anchors at 16px/1rem — never smaller for prose.
     Ratio ~1.2 in the text range, widening to ~1.25–1.33 at display. */
  --fs-display-2xl: clamp(2.5rem, 4vw + 1rem, 4rem);        /* 40 → 64 */
  --fs-display-xl:  clamp(2.25rem, 2.6vw + 1rem, 3.25rem);  /* 36 → 52 */
  --fs-display-lg:  clamp(1.875rem, 1.8vw + 1rem, 2.75rem); /* 30 → 44 */
  --fs-h1:          clamp(1.75rem, 1.2vw + 1rem, 2.25rem);  /* 28 → 36 */
  --fs-h2:          clamp(1.5rem, 0.8vw + 1rem, 1.75rem);   /* 24 → 28 */
  --fs-h3:          1.5rem;     /* 24 */
  --fs-h4:          1.25rem;    /* 20 */
  --fs-body-lg:     1.125rem;   /* 18 */
  --fs-body:        1rem;       /* 16 — minimum for body copy */
  --fs-body-sm:     0.875rem;   /* 14 */
  --fs-caption:     0.75rem;    /* 12 */

  /* ---------- LINE-HEIGHT ---------- (unitless; tightens as size grows) */
  --lh-display: 1.1;    /* large display / hero        */
  --lh-heading: 1.15;   /* h1 / h2 / section titles    */
  --lh-snug:    1.3;    /* h3 / h4                     */
  --lh-body:    1.55;   /* body copy                   */
  --lh-relaxed: 1.6;    /* long-form / leads           */

  /* ---------- LETTER-SPACING ---------- (negative only on large display) */
  --ls-display: -0.02em;
  --ls-tight:   -0.01em;
  --ls-normal:  0;
  --ls-wide:    0.02em;   /* captions / eyebrows / small caps */

  /* ---------- SPACING SCALE ---------- (4px base, 8px-dominant)
     4–8 inner/icon gaps · 12–16 component padding · 24–32 between
     components · 48–96 section padding · 96–160 major separation. */
  --space-4:   0.25rem;
  --space-8:   0.5rem;
  --space-12:  0.75rem;
  --space-16:  1rem;
  --space-24:  1.5rem;
  --space-32:  2rem;
  --space-40:  2.5rem;
  --space-48:  3rem;
  --space-64:  4rem;
  --space-80:  5rem;
  --space-96:  6rem;
  --space-128: 8rem;
  --space-160: 10rem;

  /* section vertical rhythm — fluid 64 → 96 */
  --space-section: clamp(4rem, 6vw, 6rem);

  /* ---------- SHAPE ---------- */
  --ou-radius-sm:   12px;
  --ou-radius:      16px;
  --ou-radius-lg:   24px;
  --ou-radius-pill: 999px;

  /* ---------- ELEVATION ---------- (two soft steps + a hairline; nothing heavier) */
  --ou-shadow-1: 0 1px 2px rgba(21,35,97,.04), 0 8px 20px -14px rgba(21,35,97,.20);
  --ou-shadow-2: 0 18px 40px -28px rgba(6,16,38,.28);
  --ou-line: 1px solid rgba(21,35,97,.07);

  /* ---------- LAYOUT ---------- */
  --ou-container: 1168px;
  --ou-gutter: 24px;
}