/* =============================================================
   SPRUCE PROJECT — Design Tokens
   All design values live here. Never use raw values elsewhere.
   ============================================================= */

:root {
  /* --- Palette 8: Dark + Teal (default) --- */
  --color-bg:      #3a393f; 
  --color-surface: #2e2e33;
  --color-text:    #fdfdff;
  --color-accent:  #55b0e0;
  --color-mid:     #546a7b;
  --color-neutral: #c6c5b9;
  --color-muted:   rgba(253, 253, 255, 0.45);
  --color-border:  rgba(253, 253, 255, 0.1);

  /* --- Typography --- */
  --font-display: 'Inter', system-ui, -apple-system, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;

  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg:   1.25rem;    /* 20px */
  --text-xl:   1.75rem;    /* 28px */
  --text-2xl:  2.5rem;     /* 40px */
  --text-3xl:  4rem;       /* 64px */
  --text-display: clamp(2.75rem, 7vw, 5.5rem);

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semi:   600;
  --weight-bold:   700;

  --leading-tight:  1.05;
  --leading-snug:   1.3;
  --leading-normal: 1.65;

  --tracking-tight:  -0.03em;
  --tracking-normal:  0;
  --tracking-wide:    0.08em;

  /* --- Spacing (4px base) --- */
  --space-xs:  0.25rem;   /* 4px  */
  --space-sm:  0.5rem;    /* 8px  */
  --space-md:  1rem;      /* 16px */
  --space-lg:  2rem;      /* 32px */
  --space-xl:  4rem;      /* 64px */
  --space-2xl: 8rem;      /* 128px */

  /* --- Layout --- */
  --container-max: 1120px;
  --container-pad: var(--space-lg);
  --nav-height: 5rem;

  /* --- Transitions --- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);

  --duration-fast: 0.4s;
  --duration-base: 0.4s;

  /* --- Radius --- */
  --radius-sm: 2px;
  --radius-md: 6px;
  --radius-lg: 12px;
}

/* =============================================================
   The vertical scale
   -------------------------------------------------------------
   Every viewport-height measurement on this site goes through
   --vph. Nothing anywhere else should write vh, svh, lvh or dvh.

   Why: a mobile browser hiding its toolbar makes the viewport
   taller, and anything sized against the viewport grows with it —
   in the middle of the scroll that caused it. The browser then
   corrects the scroll position against content that just moved,
   and the page lurches up, down, up. Probes on a real handset
   read vh, svh and lvh as the same number, all three tracking the
   toolbar, even though CSS.supports('height','100svh') answers
   true. There is no viewport unit that can be trusted with this.

   The values below are the fallback ladder for a browser with no
   JavaScript. The pin in includes/header.php replaces --vph with
   a fixed pixel height before the first paint, and rewrites it
   only when the viewport *width* changes.

   See design-notes/viewport-height.md.
   ============================================================= */
:root { --vph: 100vh; }
@supports (height: 100svh) { :root { --vph: 100svh; } }

/* =============================================================
   Responsive overrides
   ============================================================= */
@media (max-width: 768px) {
  :root {
    --container-pad: var(--space-md);
    --text-xl:   1.375rem;
    --text-2xl:  2rem;
    --space-2xl: 4rem;
    --space-xl:  2.5rem;
  }
}