/* =====================================================================
   tokens.css — design tokens for /web-design-surrey/ landing page
   Surrey Web Guru — PREMIUM tier
   Editorial restraint · Fraunces + Plus Jakarta Sans · WCAG 2.2 AA floor
   ===================================================================== */

:root {
  /* ------------------------------------------------------------------
     COLOR — hand-picked, neutrals + 1 accent (royal blue, matches logo)
     Greys dominate; full ramp defined up front (no color-mix at runtime).
     ------------------------------------------------------------------ */

  /* Neutrals (warm-cool balanced; near-paper white at top) */
  --grey-50:  #FAFAF7;   /* paper bg */
  --grey-100: #F2F1EC;
  --grey-200: #E5E3DC;
  --grey-300: #C9C6BC;
  --grey-400: #98948A;
  --grey-500: #6C6A63;
  --grey-600: #4D4B46;
  --grey-700: #33322F;
  --grey-800: #1E1D1B;
  --grey-900: #0F0F0E;   /* ink */

  /* Accent — royal blue (carries from existing SWG.com v3 build) */
  --accent-100: #E7EEFE;
  --accent-200: #C5D4FD;
  --accent-300: #94B0FB;
  --accent-400: #5F86F6;
  --accent-500: #1D4ED8;  /* base accent */
  --accent-600: #1842B8;
  --accent-700: #143591;
  --accent-800: #102B75;
  --accent-900: #0C2059;

  /* Semantic */
  --color-bg:           var(--grey-50);
  --color-bg-alt:       #FFFFFF;
  --color-bg-inverse:   var(--grey-900);
  --color-text:         var(--grey-900);
  --color-text-muted:   var(--grey-600);
  --color-text-subtle:  var(--grey-500);
  --color-text-inverse: var(--grey-50);
  --color-border:       var(--grey-200);
  --color-border-strong:var(--grey-300);
  --color-rule:         var(--grey-200);
  --color-accent:       var(--accent-500);
  --color-accent-ink:   var(--accent-700);
  --color-focus:        var(--accent-500);

  /* WCAG contrast verified pairs (4.5:1+ for body, 3:1+ for large/UI):
     - grey-900 (#0F0F0E) on grey-50 (#FAFAF7) = 19.4:1 (body)
     - grey-600 (#4D4B46) on grey-50 = 8.4:1 (muted)
     - grey-500 (#6C6A63) on grey-50 = 5.5:1 (subtle, body-safe)
     - accent-700 (#143591) on grey-50 = 9.5:1 (links)
     - grey-50 on accent-500 (#1D4ED8) = 6.4:1 (button)
     - grey-50 on grey-900 = 19.4:1 (inverse)
  */

  /* ------------------------------------------------------------------
     TYPOGRAPHY — Fraunces (display) + Plus Jakarta Sans (body)
     Modular scale: 1.333 (perfect fourth) — editorial/luxury default
     Base body 17px. Line-height 1.55 body, 1.1-1.2 display.
     ------------------------------------------------------------------ */

  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Type scale (1.333 ratio anchored at 17px body) */
  --fs-mono:   0.75rem;   /* 12px — eyebrow / labels */
  --fs-sm:     0.875rem;  /* 14px */
  --fs-base:   1.0625rem; /* 17px — body */
  --fs-lg:     1.25rem;   /* 20px — lede */
  --fs-xl:     1.5rem;    /* 24px — section sub */
  --fs-2xl:    2rem;      /* 32px — H3 */
  --fs-3xl:    2.625rem;  /* 42px — H2 */
  --fs-4xl:    3.5rem;    /* 56px — H1 desktop */
  --fs-5xl:    4.75rem;   /* 76px — display */

  /* Line heights */
  --lh-tight: 1.05;
  --lh-snug: 1.15;
  --lh-normal: 1.35;
  --lh-body: 1.55;

  /* Weight scale (Plus Jakarta Sans: 200-800; Fraunces: 100-900) */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Letter spacing */
  --ls-tight: -0.02em;
  --ls-snug: -0.01em;
  --ls-normal: 0;
  --ls-wide: 0.02em;
  --ls-mono: 0.12em;

  /* Measure */
  --measure-narrow: 48ch;
  --measure: 64ch;
  --measure-wide: 80ch;

  /* ------------------------------------------------------------------
     SPACING — 4px base, exposed scale
     ------------------------------------------------------------------ */
  --xs:   4px;
  --sm:   8px;
  --md:   16px;
  --lg:   24px;
  --xl:   32px;
  --2xl:  48px;
  --3xl:  64px;
  --4xl:  96px;
  --5xl:  128px;
  --6xl:  160px;

  /* ------------------------------------------------------------------
     LAYOUT
     ------------------------------------------------------------------ */
  --container: 1200px;
  --container-narrow: 880px;
  --container-text: 720px;

  /* ------------------------------------------------------------------
     RADII + SHADOWS — editorial restraint
     ------------------------------------------------------------------ */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-full: 999px;

  --shadow-hair: 0 0 0 1px var(--color-border);
  --shadow-sm: 0 1px 2px rgba(15, 15, 14, 0.04), 0 0 0 1px rgba(15, 15, 14, 0.04);
  --shadow-md: 0 6px 24px -8px rgba(15, 15, 14, 0.10), 0 0 0 1px rgba(15, 15, 14, 0.04);

  /* ------------------------------------------------------------------
     MOTION — considered, subtle, prefers-reduced-motion respected
     ------------------------------------------------------------------ */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --dur-fast: 150ms;
  --dur: 240ms;
  --dur-slow: 600ms;
  --dur-reveal: 800ms;

  /* ------------------------------------------------------------------
     Z-INDEX
     ------------------------------------------------------------------ */
  --z-nav: 50;
  --z-modal: 100;
  --z-toast: 200;
}

/* Reduced-motion short-circuit */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur: 0ms;
    --dur-slow: 0ms;
    --dur-reveal: 0ms;
  }
}