/* ============================================================================
   The PR Code - design tokens
   Single source of truth. Nothing in this codebase hard-codes a colour, a
   spacing value, a duration or a breakpoint-derived size: it comes from here.
   ========================================================================= */

:root {
  /* ---------------------------------------------------------------- canvas */
  --ink-900: #0B0B0C;   /* page base                        */
  --ink-850: #101012;   /* alternating section              */
  --ink-800: #151518;   /* cards, inputs                    */
  --ink-700: #1D1D21;   /* card hover, table stripe         */
  --ink-600: #2A2A30;   /* raised chips                     */

  /* ---------------------------------------------------------------- type */
  --white: #FFFFFF;
  --mist-200: #E6E7EA;  /* strong body on dark              */
  --mist-400: #A7A9AE;  /* secondary body                   */
  --mist-600: #6E7076;  /* captions, meta, disabled         */

  /* ---------------------------------------------------------------- accent */
  --blue-500: #2E6BFF;  /* primary accent                   */
  --blue-600: #1E4FD8;  /* hover / pressed                  */
  --blue-400: #5B8BFF;  /* links on dark, focus ring        */
  --blue-100: #D6E2FF;  /* tint text on blue-tinted blocks  */
  --blue-050: #F0F5FF;  /* light-section tint background    */
  --blue-glow: rgba(46, 107, 255, .35);

  /* ---------------------------------------------------------------- light surfaces */
  --paper: #FFFFFF;
  --paper-alt: #F6F7F9;
  --ink-on-paper: #0B0B0C;
  --muted-on-paper: #5A5D64;

  /* ---------------------------------------------------------------- lines & shadows */
  --line: rgba(255, 255, 255, .12);
  --line-strong: rgba(255, 255, 255, .24);
  --line-dark: rgba(11, 11, 12, .10);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, .28);
  --shadow-md: 0 12px 32px rgba(0, 0, 0, .38);
  --shadow-blue: 0 10px 30px var(--blue-glow);

  /* ---------------------------------------------------------------- status */
  --ok: #2FBF71;
  --warn: #F5A524;
  --danger: #E5484D;
  --info: #2E6BFF;

  /* ---------------------------------------------------------------- radii */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --r-pill: 999px;

  /* ---------------------------------------------------------------- motion */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out-expo: cubic-bezier(.16, 1, .3, 1);
  --t-fast: 160ms;
  --t-base: 280ms;
  --t-slow: 600ms;
  --t-reveal: 900ms;

  /* ---------------------------------------------------------------- layout */
  --container: 1320px;
  --container-narrow: 860px;
  --container-wide: 1560px;
  --gutter: 20px;
  --header-h: 64px;
  --z-header: 900;
  --z-drawer: 950;
  --z-modal: 1000;
  --z-toast: 1100;

  /* ---------------------------------------------------------------- fonts
     Google Sans and Google Sans Code are shipped as self-hosted woff2 files
     and declared in fonts.css - no third-party font requests. The system
     stack after them is only a first-paint fallback. */
  --font-sans: "Google Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "Google Sans Code", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---------------------------------------------------------------- type scale
     Fluid: min = 360px phone rendering, max = >=1440px rendering. */
  --fs-hero:    clamp(34px, 6.4vw, 88px);
  --fs-d1:      clamp(30px, 5vw, 64px);
  --fs-h2:      clamp(26px, 3.4vw, 50px);
  --fs-h3:      clamp(20px, 2vw, 30px);
  --fs-h4:      clamp(17px, 1.3vw, 21px);
  --fs-eyebrow: 12px;
  --fs-lead:    clamp(17px, 1.5vw, 21px);
  --fs-body:    16px;
  --fs-small:   14px;
  --fs-nav:     12px;
  --fs-btn:     13px;
  --fs-index:   clamp(13px, 1vw, 15px);
  --fs-stat:    clamp(40px, 5vw, 72px);

  /* tracking */
  --tr-hero: -0.035em;
  --tr-d1: -0.03em;
  --tr-h2: -0.02em;
  --tr-h3: -0.01em;
  --tr-h4: 0.01em;
  --tr-eyebrow: 0.20em;
  --tr-nav: 0.12em;
  --tr-btn: 0.12em;
  --tr-index: 0.10em;
  --tr-label: 0.14em;

  /* leading */
  --lh-hero: 0.96;
  --lh-d1: 1.02;
  --lh-h2: 1.08;
  --lh-h3: 1.2;
  --lh-h4: 1.3;
  --lh-lead: 1.65;
  --lh-body: 1.75;
  --lh-small: 1.6;

  /* ---------------------------------------------------------------- spacing
     4, 8, 12, 16, 20, 24, 32, 40, 56, 72, 96, 128, 160, 200 */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 40px;
  --s-9: 56px;
  --s-10: 72px;
  --s-11: 96px;
  --s-12: 128px;
  --s-13: 160px;
  --s-14: 200px;

  /* section vertical rhythm */
  --sec-y: var(--s-11);
  --grid-gap: var(--s-4);

  /* component sizing */
  --btn-h: 52px;
  --btn-h-sm: 44px;
  --field-h: 56px;
  --tap: 44px;
}

/* ---------------------------------------------------------------- breakpoints */

@media (min-width: 576px) {
  :root {
    --sec-y: var(--s-10);
  }
}

@media (min-width: 768px) {
  :root {
    --gutter: 32px;
    --header-h: 80px;
    --sec-y: var(--s-11);
    --grid-gap: var(--s-6);
    --btn-h: 56px;
    --fs-body: 16px;
  }
}

@media (min-width: 992px) {
  :root {
    --sec-y: 112px;
  }
}

@media (min-width: 1200px) {
  :root {
    --gutter: 40px;
    --header-h: 88px;
    --sec-y: var(--s-12);
    --grid-gap: var(--s-7);
    --fs-body: 17px;
    --fs-eyebrow: 13px;
  }
}

@media (min-width: 1440px) {
  :root {
    --fs-nav: 13px;
  }
}

/* Mobile-first floor: sections tighten below the small-phone breakpoint. */
@media (max-width: 575.98px) {
  :root {
    --sec-y: 64px;
  }
}