/* ==========================================================================
   Juggernaut — design tokens
   SITE.16. Extracted from the live site at https://hailsupps.com, not copied
   from it. Every value below was read out of that site's own configuration and
   stylesheets and restated here as a custom property; nothing is a guess and no
   rule from the original stylesheet was carried over.

   Where each value came from:
     - hailsupps.com loads Tailwind from a CDN with an inline `tailwind.config`
       declaring colors primary / background-light / background-dark / secondary,
       fontFamily sans + display, and borderRadius DEFAULT. That block is the
       palette and the type pairing.
     - Three custom classes sit in an inline <style>: .metallic-gradient,
       .teal-glow and .glass-card. Those are the three surface treatments.
     - pricing.html carries its OWN inline stylesheet with a slightly different,
       brighter teal and a dark gradient body. Both teals are recorded below.
     - The greys are Tailwind's slate ramp, which is what the markup asks for
       (text-slate-900, dark:text-slate-100, text-slate-400, border-slate-200).

   IMPORTANT — the live site renders LIGHT. `tailwind.config` sets
   darkMode:"class" but nothing ever puts `dark` on <html>, so every
   `dark:` utility on those pages is inert. Page background is
   background-light, nav is white, body copy is slate-900. The dark
   metallic gradient appears only as two banded sections on the homepage.
   This file encodes that reality, not the unreachable dark variant.
   ========================================================================== */

:root {
  /* ── Brand ──────────────────────────────────────────────────────────────
     Two teals are in production. `primary` is the Tailwind config value used
     across the homepage, About and Our Process. `accent-bright` is the value
     the standalone pricing stylesheet uses. They are 6% apart in hue and were
     almost certainly meant to be the same colour; both are kept so a port can
     be faithful, and --accent points at the one with the wider footprint. */
  --brand-teal:        #00CED1;   /* tailwind.config colors.primary */
  --brand-teal-bright: #00e5c8;   /* pricing.html inline stylesheet */
  --brand-teal-hover:  #00f5d8;   /* pricing.html .btn-filled:hover */
  --accent:            var(--brand-teal);

  /* ── Surfaces ───────────────────────────────────────────────────────────
     Light is the page. Dark is the banded treatment, not the default. */
  --bg:            #f8fafc;   /* colors.background-light — the page */
  --surface:       #ffffff;   /* nav, cards — bg-white */
  --surface-2:     #f1f5f9;   /* slate-100, nested panels */
  --bg-invert:     #0a1114;   /* colors.background-dark */
  --secondary:     #0f172a;   /* colors.secondary (slate-900) */

  /* ── Type colours ───────────────────────────────────────────────────────
     Tailwind slate ramp, as the markup requests it. */
  --text:          #0f172a;   /* text-slate-900 */
  --text-invert:   #f1f5f9;   /* text-slate-100, used on dark bands */
  --muted:         #64748b;   /* text-slate-500 */
  --muted-invert:  #94a3b8;   /* text-slate-400 on dark bands */

  /* ── Lines ──────────────────────────────────────────────────────────────*/
  --hairline:        #e2e8f0;                    /* border-slate-200 */
  --hairline-invert: rgba(255, 255, 255, 0.1);   /* dark:border-white/10 */
  --accent-soft:     rgba(0, 206, 209, 0.10);    /* bg-primary/10 */
  --accent-faint:    rgba(0, 206, 209, 0.05);    /* bg-primary/5  */
  --accent-dim:      rgba(0, 206, 209, 0.30);    /* border-primary/30 */

  /* ── Surface treatments — the three custom classes, verbatim values ─────*/
  --metallic-gradient: radial-gradient(circle at top left, #1a2e35 0%, #0a1114 100%);
  /* SITE.22 removed --pricing-gradient and --band-alt with the pricing page. They were
     extracted from that page's own stylesheet and had no other consumer; leaving unused
     values in a token file is how a deleted page's look creeps back in somewhere else.
     The teals below stay — they are still the brand, whatever page they were read off. */
  --teal-glow:         0 0 20px rgba(0, 206, 209, 0.2);
  --teal-glow-strong:  0 0 20px rgba(0, 229, 200, 0.35);
  --glass-bg:          rgba(255, 255, 255, 0.03);
  --glass-border:      1px solid rgba(255, 255, 255, 0.1);
  --glass-blur:        blur(10px);

  /* ── Type ───────────────────────────────────────────────────────────────
     fontFamily.sans = Inter (300–800 loaded), fontFamily.display = Oswald
     (500,700 loaded). Oswald carries the uppercase display headings; Inter
     carries everything else. */
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Oswald", "Arial Narrow", Impact, sans-serif;

  /* Type scale — Tailwind's default ramp, limited to the steps the live
     markup actually uses (text-xs through text-7xl). */
  --fs-xs:   0.75rem;    --lh-xs:   1rem;
  --fs-sm:   0.875rem;   --lh-sm:   1.25rem;
  --fs-base: 1rem;       --lh-base: 1.5rem;
  --fs-lg:   1.125rem;   --lh-lg:   1.75rem;
  --fs-xl:   1.25rem;    --lh-xl:   1.75rem;
  --fs-2xl:  1.5rem;     --lh-2xl:  2rem;
  --fs-3xl:  1.875rem;   --lh-3xl:  2.25rem;
  --fs-4xl:  2.25rem;    --lh-4xl:  2.5rem;
  --fs-5xl:  3rem;       --lh-5xl:  1;
  --fs-7xl:  4.5rem;     --lh-7xl:  1;

  --fw-light:     300;
  --fw-normal:    400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-extrabold: 800;

  --tracking-tighter: -0.05em;
  --tracking-tight:   -0.025em;
  --tracking-widest:  0.1em;

  /* ── Rhythm ─────────────────────────────────────────────────────────────
     max-w-7xl with px-4 / sm:px-6 / lg:px-8, h-20 header, rounded 0.5rem. */
  --shell:    80rem;    /* max-w-7xl = 1280px */
  --shell-narrow: 900px;/* pricing .container */
  --gutter:   1rem;     /* px-4  */
  --gutter-sm: 1.5rem;  /* sm:px-6 */
  --gutter-lg: 2rem;    /* lg:px-8 */
  --header-h: 5rem;     /* h-20 */
  --radius:   0.5rem;   /* borderRadius.DEFAULT */
  --section-y: clamp(3.5rem, 8vw, 6rem);  /* py-24-ish band rhythm */
}
