/* ─────────────────────────────────────────────────────────────────────────────
   GoShorty rebuild — design tokens (Phase 1).
   Single source of truth: every component consumes these variables; no
   hardcoded colours/sizes anywhere else in the codebase.

   Provenance: values are the AUTHORED values extracted from the original
   portal's own stylesheet (reference/portal-inline.css, saved from
   your.goshorty.co.uk) and its SVG assets, cross-checked against the
   reference screenshots by pixel sampling (all matches within JPEG noise,
   <13 RGB-units distance). The email lavender is sampled from the
   screenshots (#d1d3ec) because email HTML is not part of the portal CSS.
   ───────────────────────────────────────────────────────────────────────── */

/* ── Fonts (exact brand files, served locally; clean names) ──────────────── */
/* Headings/serif: TT Norms Pro Serif. UI/body sans: TT Norms Pro.
   Number plates: Charles Wright ("UK Number Plate" in the original).
   RobotoMono: monospaced (OTP/code contexts in the original). */
@font-face { font-family: 'TT Norms Pro'; font-weight: 400; font-style: normal; font-display: swap; src: url('/fonts/TT_Norms_Pro_Regular.woff2') format('woff2'); }
@font-face { font-family: 'TT Norms Pro'; font-weight: 450; font-style: normal; font-display: swap; src: url('/fonts/TT_Norms_Pro_Normal.woff2') format('woff2'); }
@font-face { font-family: 'TT Norms Pro'; font-weight: 500; font-style: normal; font-display: swap; src: url('/fonts/TT_Norms_Pro_Medium.woff2') format('woff2'); }
@font-face { font-family: 'TT Norms Pro'; font-weight: 600; font-style: normal; font-display: swap; src: url('/fonts/TT_Norms_Pro_DemiBold.woff2') format('woff2'); }
@font-face { font-family: 'TT Norms Pro'; font-weight: 700; font-style: normal; font-display: swap; src: url('/fonts/TT_Norms_Pro_Bold.woff2') format('woff2'); }
@font-face { font-family: 'TT Norms Pro Serif'; font-weight: 400; font-style: normal; font-display: swap; src: url('/fonts/TT_Norms_Pro_Serif_Regular.woff2') format('woff2'); }
@font-face { font-family: 'TT Norms Pro Serif'; font-weight: 450; font-style: normal; font-display: swap; src: url('/fonts/TT_Norms_Pro_Serif_Normal.woff2') format('woff2'); }
@font-face { font-family: 'TT Norms Pro Serif'; font-weight: 500; font-style: normal; font-display: swap; src: url('/fonts/TT_Norms_Pro_Serif_Medium.woff2') format('woff2'); }
@font-face { font-family: 'TT Norms Pro Serif'; font-weight: 600; font-style: normal; font-display: swap; src: url('/fonts/TT_Norms_Pro_Serif_DemiBold.woff2') format('woff2'); }
@font-face { font-family: 'TT Norms Pro Serif'; font-weight: 700; font-style: normal; font-display: swap; src: url('/fonts/TT_Norms_Pro_Serif_Bold.woff2') format('woff2'); }
@font-face { font-family: 'UK Number Plate'; font-weight: 700; font-style: normal; font-display: swap; src: url('/fonts/CharlesWright-Bold.woff2') format('woff2'); }
@font-face { font-family: 'RobotoMono'; font-weight: 400; font-style: normal; font-display: swap; src: url('/fonts/RobotoMono-Regular.woff2') format('woff2'); }
/* The ORIGINAL registers one family PER WEIGHT ("TT Norms Pro Regular" etc.) and
   sets body to the Regular family - so font-weight:700 text renders as the
   browser's SYNTHETIC bold of the Regular file (visibly lighter than the real
   Bold cut). Replicate that exact model for the sans. */
@font-face { font-family: 'TT Norms Pro Regular'; font-weight: 400; font-style: normal; font-display: swap; src: url('/fonts/TT_Norms_Pro_Regular.woff2') format('woff2'); }

:root {
  /* ── Font stacks (original fallback chain: Lato,Helvetica,Roboto,Arial) ── */
  --font-serif: 'TT Norms Pro Serif', Georgia, 'Times New Roman', serif;
  --font-sans:  'TT Norms Pro Regular', Lato, Helvetica, Roboto, Arial, sans-serif;   /* single-weight family: bold = synthetic, as authored */
  --font-plate: 'UK Number Plate', 'RobotoMono', ui-monospace, monospace;
  --font-mono:  'RobotoMono', ui-monospace, monospace;

  /* ── Brand colours (authored hexes + the original's own Tailwind names) ── */
  --gs-tarmac:        #1d1e2c;  /* primary dark: cards, panels, footer, text */
  --gs-tarmacdark:    #202132;  /* inner panels (policy cards, info boxes) */
  --gs-tarmacform:    #353752;  /* badges, base-card surface */
  --gs-electricgreen: #70ed9b;  /* primary action green; "Live" status */
  --gs-skyblue:       #4280ff;  /* countdowns, "Starting soon", circled arrows */
  --gs-pink:          #ce43ff;  /* active-tab underline, logout hover */
  --gs-errortextred:  #ff7c5c;  /* form error messages; "This policy has expired." */
  --gs-lightgray:     #e0e0e0;  /* borders, dividers, desktop header bar bg */
  --gs-white:         #deded8;  /* tile borders (at 20% opacity) */
  --white:            #ffffff;
  /* Back-compat aliases (earlier names) */
  --navy: var(--gs-tarmac); --navy-2: var(--gs-tarmacdark); --slate: var(--gs-tarmacform);
  --mint: var(--gs-electricgreen); --blue: var(--gs-skyblue); --magenta: var(--gs-pink);

  /* ── Neutrals (authored; Tailwind-derived in the original) ──────────────── */
  --gray-50:  #f9fafb;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;   /* placeholders, muted labels */
  --gray-border: #e0e0e0;
  --gray-text: #666666;  /* muted body text (authored rgb(102 102 102)) */

  /* ── Semantic (authored) ─────────────────────────────────────────────────── */
  --red:      #ef4444;   /* errors */
  --red-deep: #dc2626;
  --yellow-soft: #fef9c3;

  /* ── Brand gradient (exact stops from the original SVG icons) ───────────── */
  --grad-magenta: #ce43ff;
  --grad-blue:    #4280ff;
  --grad-mint:    #70ed9b;
  --grad-mid-stop: 51.4675754%;
  --gradient-brand: linear-gradient(90deg, var(--grad-mint) 0%, var(--grad-blue) var(--grad-mid-stop), var(--grad-magenta) 100%);

  /* ── Email palette (email HTML only; lavender sampled from screenshots) ── */
  --email-lavender: #d1d3ec;  /* page/table background in both emails */
  --email-green:    #1d8a63;  /* subheading + link green (sampled) */
  --email-pill:     #14401f;  /* dark green pill buttons (sampled; verify in Phase 2 email build) */
  --email-code-bg:  #a7d7bd;  /* OTP code block (sampled; verify) */

  /* ── UK number plate component (authored: .form-registration-solid) ─────── */
  --plate-yellow: #ffcc00;   /* authored #fc0 */
  --plate-band:   #2b56d4;   /* band ships as the original veh-reg-uk.png; fallback */
  --plate-ink:    var(--gs-tarmac);

  /* ── Type scale (authored rem scale; root 16px) ──────────────────────────── */
  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  1.875rem;   /* 30px */
  --text-4xl:  2.25rem;    /* 36px */
  --text-5xl:  3rem;       /* 48px */

  /* ── Letter spacing (authored) ───────────────────────────────────────────── */
  --tracking-caps:  .1em;      /* NEW QUOTE, 100% SECURE, caps labels */
  --tracking-wide:  .05em;
  --tracking-mid:   .03125em;
  --tracking-tight: .025em;

  /* ── Spacing scale (Tailwind 4px base, as authored) ─────────────────────── */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px;

  /* ── Radii (authored) ────────────────────────────────────────────────────── */
  --radius-sm:   0.25rem;   /* 4px */
  --radius-md:   0.375rem;  /* 6px */
  --radius-lg:   0.5rem;    /* 8px */
  --radius-xl:   0.75rem;   /* 12px */
  --radius-pill: 9999px;    /* pill buttons, filter chips */

  /* ── Shadows (authored) ──────────────────────────────────────────────────── */
  --shadow-card: 0 1px 3px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.1);

  /* ── Breakpoints (reference; used in media queries, not var()) ───────────
     sm 640px · md 768px · lg 1024px · xl 1280px (Tailwind defaults, as the
     original is Tailwind-based; mobile refs are ~390px logical) ─────────── */
}