/* ==========================================================================
   CoWoNE Redesign - Design Tokens
   Direction: "Warm & Community" (Refero: Zelt + Apron, synthesized)
   Single accent: Amber. One theme: warm light. Shape: pill buttons / 16px cards.
   ========================================================================== */

:root {
  /* --- Surfaces (warm, light) --- */
  --canvas:      #e8e4de;   /* page background - warm soft stone */
  --surface-1:   #f3efe8;   /* alternating sections */
  --surface-2:   #fffdf8;   /* cards / content fills (off-white, never pure) */
  --deep:        #211f1c;   /* dark sections + footer (warm near-black) */
  --deep-soft:   #2c2a26;   /* elevated card on deep */

  /* --- Ink (text) --- */
  --ink:         #1c1d1a;   /* primary text / headings */
  --ink-soft:    #5b5853;   /* secondary text, tinted to canvas */
  --ink-faint:   #5a564e;   /* captions, meta - WCAG AA on canvas & surface */
  --on-deep:     #f4f1ea;   /* text on dark surfaces */
  --on-deep-soft:#b3aea4;

  /* --- Accent (the ONE accent for the whole page) --- */
  --accent:      #f3b13a;   /* amber pop - CTAs, active states */
  --accent-press:#e6a01f;   /* pressed/hover */
  --accent-ink:  #8a6210;   /* amber for TEXT on light bg - WCAG AA (never use accent for text on light) */
  --accent-soft: #ffe7b3;   /* highlight / badge background */
  --accent-wash: #fdf6e6;   /* faint amber wash - comparison highlight column */
  --on-accent:   #1c1d1a;   /* ink on amber (passes WCAG AA) */

  /* --- Lines & focus --- */
  --line:        #d8d2c6;   /* hairlines, dividers, input borders */
  --line-soft:   #e9e2d4;   /* softer hairline - table row dividers */
  --line-strong: #c4bdae;
  --focus:       #1c1d1a;

  /* --- Radius (shape lock) --- */
  --r-pill: 999px;          /* all buttons */
  --r-card: 16px;           /* all cards */
  --r-input: 10px;          /* inputs */
  --r-sm: 8px;              /* tags / chips */

  /* --- Elevation (subtle, warm-tinted only) --- */
  --shadow:    0 2px 8px rgba(70, 56, 16, .06), 0 8px 24px rgba(70, 56, 16, .07);
  --shadow-lg: 0 4px 14px rgba(60, 48, 12, .08), 0 22px 50px rgba(60, 48, 12, .12);

  /* --- Typography --- */
  --font-display: "Bricolage Grotesque", "DM Sans", system-ui, sans-serif;
  --font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* fluid type scale (clamp) */
  --t-caption:  0.78rem;
  --t-small:    0.9rem;
  --t-body:     1.0625rem;                              /* 17px */
  --t-lead:     clamp(1.15rem, 0.9rem + 1vw, 1.4rem);
  --t-sub:      clamp(1.35rem, 1.1rem + 1.2vw, 1.75rem);
  --t-h3:       clamp(1.5rem, 1.2rem + 1.6vw, 2.1rem);
  --t-h2:       clamp(2rem, 1.4rem + 2.8vw, 3.25rem);
  --t-display:  clamp(2.6rem, 1.6rem + 4.6vw, 5rem);

  /* --- Spacing scale (semantic, defined set - never arbitrary) --- */
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;

  /* --- Section rhythm (alternating generous / normal / tight) --- */
  --section-y:    clamp(3.5rem, 2rem + 7vw, 7.5rem);
  --section-y-lg: clamp(5rem, 2.75rem + 9vw, 10rem);
  --section-y-sm: clamp(2.25rem, 1.5rem + 3.5vw, 4rem);
  --section-y-xs: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
  --gap:        clamp(1rem, 0.6rem + 1.5vw, 1.75rem);
  --gap-lg:     clamp(1.75rem, 1rem + 3vw, 3.5rem);

  /* --- Layout --- */
  --maxw: 1240px;
  --maxw-text: 68ch;
  --nav-h: 68px;
  --nav-float-gap: 0.75rem; /* floating pill nav: gap between viewport top/sides and the bar */

  /* --- Motion (MOTION_INTENSITY 4: fluid CSS) ---
     Emil Kowalski: strong custom curves; built-in easings are too weak. */
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);   /* entrances, feedback - punchy */
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);  /* on-screen movement */
  --ease: var(--ease-out);                          /* default alias */
  --dur: 0.55s;                                     /* scroll-reveal (entering) */
  --press: 140ms;                                   /* button press feedback */
}
