/* ==========================================================================
   Design tokens — single source of truth for the visual system.
   Every color, font, spacing, radius, shadow, and motion value used
   anywhere on the site should be defined here and referenced elsewhere
   via var(--token-name). Add to this file as new sections are built;
   do not hardcode raw values in component stylesheets.
   ========================================================================== */

:root {
  /* ---- Color: base ---- */
  --color-white: #ffffff;               /* pure/super white page background */
  --color-ink: #0b0b0d;                 /* primary text, near-black */
  --color-ink-soft: #4a4a52;            /* secondary/muted text */
  --color-line: rgba(11, 11, 13, 0.08); /* hairline borders on white */

  /* ---- Color: brand blue ---- */
  --color-blue: #3a2df1;
  --color-blue-dark: #2d20d6;
  --color-blue-soft: rgba(58, 45, 241, 0.08);
  --color-blue-contrast: #ffffff;

  /* ---- Color: service theme accents ----
     One accent per service pillar (see pages/*.html). --color-accent* is
     the generic alias every shared component (header, buttons, focus
     rings) actually reads; it resolves to blue by default so nothing
     outside the service pages changes. Each service page overrides the
     three --color-accent* values via body[data-accent="..."] in
     service-page.css — the palette below is only ever assigned there. */
  --color-green: #0ea65b;
  --color-green-dark: #0b8a4a;
  --color-green-soft: rgba(14, 166, 91, 0.08);

  --color-orange: #f2600c;
  --color-orange-dark: #d14f08;
  --color-orange-soft: rgba(242, 96, 12, 0.08);

  --color-purple: #7c3aed;
  --color-purple-dark: #6425d6;
  --color-purple-soft: rgba(124, 58, 237, 0.08);

  --color-pink: #e01890;
  --color-pink-dark: #c21178;
  --color-pink-soft: rgba(224, 24, 144, 0.08);

  --color-teal: #0b8fa8;
  --color-teal-dark: #08728a;
  --color-teal-soft: rgba(11, 143, 168, 0.08);

  --color-accent: var(--color-blue);
  --color-accent-dark: var(--color-blue-dark);
  --color-accent-soft: var(--color-blue-soft);
  --color-accent-contrast: #ffffff;

  /* ---- Color: surfaces ---- */
  --color-pill-hover: rgba(11, 11, 13, 0.06);   /* grey pill on nav hover */
  --color-glass-bg: rgba(255, 255, 255, 0.65);  /* floating glass nav fill */
  --color-glass-border: rgba(255, 255, 255, 0.8);
  --color-overlay-bg: #ffffff;                  /* mobile full-screen nav */

  /* ---- Typography ---- */
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Space Grotesk", var(--font-body);

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  --fs-nav: 0.9375rem;                 /* 15px nav links */
  --fs-body: 1rem;
  --fs-eyebrow: 0.8125rem;             /* 13px, letter-spaced labels */
  --fs-mega-heading: 1rem;
  --fs-mega-desc: 0.875rem;
  --fs-hero: clamp(2.75rem, 8vw, 7.5rem);
  --lh-hero: 0.98;
  --ls-tight: -0.02em;
  --ls-wide: 0.08em;

  /* ---- Spacing scale (rem) ---- */
  --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: 4.5rem;

  /* ---- Radius ---- */
  --radius-pill: 999px;
  --radius-panel: 24px;
  --radius-sm: 10px;

  /* ---- Shadow ---- */
  --shadow-nav: 0 1px 1px rgba(11, 11, 13, 0.03), 0 8px 24px rgba(11, 11, 13, 0.06);
  --shadow-panel: 0 1px 1px rgba(11, 11, 13, 0.03), 0 24px 48px rgba(11, 11, 13, 0.1);

  /* ---- Motion ---- */
  --ease-signature: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 200ms;
  --duration-base: 300ms;
  --duration-word: 500ms;
  --duration-slow: 500ms;
  --duration-link: 250ms;

  /* ---- Typography: component-specific ---- */
  --fs-portfolio-link: 1.45rem;

  /* ---- Layout ---- */
  --container-max: 1440px;
  --container-pad: clamp(1.25rem, 4vw, 3rem);
  --edge-pad: clamp(1.5rem, 3vw, 2.5rem); /* hugs the true viewport edge (header/hero), unlike --container-pad */
  --header-h: 76px;

  /* ---- Z-index scale ---- */
  --z-header: 100;
  --z-mega-menu: 90;
  --z-mobile-overlay: 200;
}