/* ════════════════════════════════════════════════════════════════
   Hiking Adventure — Design tokens (single source of truth)
   ──────────────────────────────────────────────────────────────
   ⚠ BLANK SLATE. Every brand value below is a NEUTRAL PLACEHOLDER,
   deliberately reset at project kickoff so that nothing is carried
   over from other clients' palettes. Colors here are pure greys —
   they are not a design decision, they are the absence of one.

   Real values arrive at Stage 02 (design concept), from the
   approved direction for this project only. Until then:
     - never copy a palette in from another project
     - never inline a hex in a page — add the token here first

   Structural tokens (spacing, radii, type scale, motion) are
   intentionally kept: they are a 4px-grid system, not brand.

   See:
     - shared/components.css        — uses these tokens
     - uikit/index.html             — visual reference
   ──────────────────────────────────────────────────────────── */

:root {
  /* ─── BRAND ACCENT ── TBD (Stage 02) ────────────────────────
     Neutral slate stand-in, used by buttons and focus rings.
     Replace with the approved accent. */
  --color-accent:      #6B7280;
  --color-accent-deep: #4B5563;
  --color-accent-soft: #F3F4F6;

  /* ─── INK & SURFACE ── TBD (Stage 02) ─────────────────────── */
  --color-ink:          #1A1D21;
  --color-mute:         #6B7280;
  --color-white:        #FFFFFF;
  --color-paper:        #F7F8F8;

  /* ─── BORDERS ─────────────────────────────────────────────── */
  --color-divider:      #D4D8DD;
  --color-border-light: #EDEFF1;

  /* ─── STATUS · semantic, project-agnostic ─────────────────── */
  --color-success-bg:     #DCFCE7;
  --color-success-fg:     #15803D;
  --color-success-accent: #4ADE80;
  --color-violet-bg:      #E5E7EB;
  --color-violet-fg:      #374151;
  --color-warn-bg:        #FFEDD5;
  --color-warn-fg:        #C2410C;
  --color-pin:            #EF4444;

  /* ─── GLASS surfaces ──────────────────────────────────────── */
  --color-glass-bg:    rgba(255, 255, 255, 0.80);
  --color-glass-dark:  rgba(26, 29, 33, 0.94);
  --color-glass-blur:  10px;

  /* ─── TYPE families ── TBD (Stage 02) ───────────────────────
     System stack only — no webfont is chosen yet, and no font
     from another project may be dropped in here. */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;

  /* ─── TYPE scale · 6 steps ──────────────────────────────── */
  --text-display:        56px;
  --text-display-mobile: 40px;
  --text-h2:             32px;
  --text-h2-mobile:      28px;
  --text-h3:             20px;
  --text-h3-mobile:      18px;
  --text-body:           16px;
  --text-small:          14px;
  --text-caption:        12px;

  /* ─── SPACING · 4px grid ────────────────────────────────────
     Don't pick non-multiples-of-4. If you need a missing step
     (e.g. 28), add --space-7: 28px here, don't inline. */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* ─── RADIUS ──────────────────────────────────────────────── */
  --radius-sm:    4px;
  --radius-md:    8px;     /* button */
  --radius-lg:   12px;
  --radius-xl:   14px;     /* card */
  --radius-2xl:  16px;     /* island */
  --radius-pill: 999px;

  /* ─── SHADOW · elevation ── neutral, re-tint at Stage 02 ──── */
  --shadow-island: 0 4px 14px -2px rgba(26, 29, 33, 0.08), 0 1px 3px rgba(26, 29, 33, 0.04);
  --shadow-card:   0 18px 48px -12px rgba(26, 29, 33, 0.18);
  --shadow-accent: 0 8px 24px -8px rgba(107, 114, 128, 0.5);
  --shadow-chip:   0 4px 14px -2px rgba(26, 29, 33, 0.18), 0 1px 3px rgba(26, 29, 33, 0.06);

  /* ─── MOTION ────────────────────────────────────────────────
     Restrained by client mandate: motion may only reinforce, never
     compete with, the content. Keep durations short. */
  --ease-out:        cubic-bezier(0.16, 1, 0.3, 1);
  --ease-back:       cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast:   180ms;
  --duration-normal: 280ms;
  --duration-slow:   600ms;
}