/* ==========================================================================
   Design tokens — single source of truth for color, type, spacing, radii,
   shadows, transitions, and layout. Component/section CSS (Phase 3+)
   should reference these variables, never raw hex/px values, so the
   whole system can be retuned from this one file.

   Brand color and logo turquoise (#0098ad) and gray (#565353) come from
   the studio's brand assets. Every other value below — hover/tint/shade
   variants, the neutral scale, spacing, radii — is derived or standard
   UI tooling, not a separate brand decision. See
   docs/PHASE-1-AUDIT-AND-PLAN.md for the project this supports.
   ========================================================================== */

:root {
  /* ----------------------------------------------------------------------
     Color — brand
     ---------------------------------------------------------------------- */
  --color-turquoise: #0098ad;
  /* Raw --color-turquoise is only 3.45:1 against white — fails WCAG AA for
     text (needs 4.5:1), fine for large-scale/decorative use only. Use
     -dark for any interactive text/button (5.08:1, passes AA). */
  --color-turquoise-dark: #007a8a;
  --color-turquoise-darker: #006370;
  --color-turquoise-tint-10: #e6f5f7;
  --color-turquoise-tint-25: #bfe5ea;
  --color-turquoise-tint-50: #80ccd6;

  --color-gray: #565353;
  /* Derived near-black, warmer than pure black, for headings. */
  --color-ink: #2f2e2e;

  --color-white: #ffffff;
  --color-gray-90: #6f6d6d;
  --color-gray-70: #918f8f;
  --color-gray-45: #bbbaba;
  --color-gray-25: #dddddd;
  --color-gray-12: #f1f1f1;
  --color-off-white: #fafafa;

  /* Semantic aliases — components should reference these, not the raw
     color-* tokens above, so the palette can be retuned in one place. */
  --color-text: var(--color-gray);
  --color-heading: var(--color-ink);
  --color-link: var(--color-turquoise-dark);
  --color-link-hover: var(--color-turquoise-darker);
  --color-bg: var(--color-white);
  --color-bg-subtle: var(--color-off-white);
  --color-bg-accent: var(--color-turquoise-tint-10);
  --color-border: var(--color-gray-25);
  --color-focus-ring: var(--color-turquoise-dark);

  /* Functional/system states — muted rather than stock red/green, to stay
     in the warm, calm register (docs/BRIEF.md §3). Ordinary UI necessity,
     not brand content. */
  --color-success: #3f7a4f;
  --color-success-bg: #eaf3ec;
  --color-error: #b3432f;
  --color-error-bg: #fbeeec;

  /* ----------------------------------------------------------------------
     Typography — Museo (Adobe Fonts kit tfm5cuw), weights 100/300/500/
     700/900 + italics. Adobe's own fallback is serif (Museo is a slab
     serif), kept here.
     ---------------------------------------------------------------------- */
  --font-family-base: "museo", Georgia, "Times New Roman", serif;

  --font-weight-thin: 100;
  --font-weight-regular: 300;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --font-weight-black: 900;

  --line-height-tight: 1.15;
  --line-height-snug: 1.35;
  --line-height-base: 1.6;

  /* Fluid scale — clamp(min, viewport-relative preferred, max) so type
     scales smoothly between mobile and desktop without duplicating values
     across media queries. rem-based (1rem = 16px root). */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: clamp(1.125rem, 1.06rem + 0.3vw, 1.25rem);
  --text-xl: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --text-2xl: clamp(1.5rem, 1.3rem + 0.9vw, 1.875rem);
  --text-3xl: clamp(1.875rem, 1.5rem + 1.6vw, 2.5rem);
  --text-4xl: clamp(2.25rem, 1.7rem + 2.4vw, 3.25rem);
  --text-5xl: clamp(2.75rem, 1.9rem + 3.6vw, 4.5rem);

  /* ----------------------------------------------------------------------
     Spacing — 4px base unit
     ---------------------------------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  /* ----------------------------------------------------------------------
     Radii, shadows, transitions — soft and restrained, per the "warm,
     calm, not childish" direction in docs/BRIEF.md §3.
     ---------------------------------------------------------------------- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  --shadow-sm: 0 1px 2px rgba(47, 46, 46, 0.06);
  --shadow-md: 0 4px 16px rgba(47, 46, 46, 0.08);
  --shadow-lg: 0 12px 32px rgba(47, 46, 46, 0.12);

  --transition-fast: 150ms;
  --transition-base: 250ms;
  --transition-slow: 400ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);

  /* ----------------------------------------------------------------------
     Layout
     ---------------------------------------------------------------------- */
  --content-max-width: 1200px;
  /* Long-form Approach/blog copy reads better narrower — docs/BRIEF.md §51. */
  --content-max-width-narrow: 760px;
  --content-padding-inline: var(--space-5);

  /* ----------------------------------------------------------------------
     Z-index scale
     ---------------------------------------------------------------------- */
  --z-nav: 100;
  --z-overlay: 200;
  --z-modal: 300;
  --z-toast: 400;
}

/* Breakpoints (reference only — custom properties can't be used inside
   @media conditions, so component/section CSS must use these literal
   pixel values directly in @media rules):
     sm: 480px   md: 768px   lg: 1024px   xl: 1280px */