/* ===========================================================================
   easynquicktrafficschool.com - design tokens - identity "Under the Hour"
   ---------------------------------------------------------------------------
   Follows logo direction B (Luis, 2026-10-08): a teal stopwatch whose hand is
   a check, red "TRAFFIC SCHOOL". Teal is STRUCTURE (headings, nav, panels),
   red is ACTION (every button that starts a purchase) and nothing else, amber
   is a FILL accent for the price and coupon only. Outfit (the logo's face)
   for display, DM Sans for text, both self-hosted. Visibly distinct from the
   Agency-template siblings and from La Mejor (Poppins/Figtree, red/blue).

   Measured contrast (WCAG 2.1):
     white on --teal   #006786   6.39:1   AA text
     white on --red    #B3121F   6.95:1   AA text
     --ink on white    #10262E  15.6:1
     --muted on white  #475A61   7.0:1
     --teal on --mist  #006786   5.8:1    AA text on the tinted bands
     --ink on --amber  #10262E   10.9:1   (amber is never text)
   ======================================================================== */

@font-face { font-family: "Outfit"; font-weight: 600; font-display: swap; src: url("../fonts/outfit-600-latin.woff2") format("woff2"); }
@font-face { font-family: "Outfit"; font-weight: 800; font-display: swap; src: url("../fonts/outfit-800-latin.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-weight: 400; font-display: swap; src: url("../fonts/dm-sans-400-latin.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-weight: 500; font-display: swap; src: url("../fonts/dm-sans-500-latin.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-weight: 700; font-display: swap; src: url("../fonts/dm-sans-700-latin.woff2") format("woff2"); }

:root {
  /* ---- ground ---------------------------------------------------------- */
  --paper:     #FFFFFF;
  --mist:      #EAF4F6;   /* alternating bands, a breath of the teal */
  --line:      #D5E6EA;
  --surface:   #FFFFFF;

  /* ---- text ------------------------------------------------------------ */
  --ink:       #10262E;
  --muted:     #475A61;
  --on-dark:   #E6F3F6;

  /* ---- brand ----------------------------------------------------------- */
  --teal:      #006786;   /* structure */
  --teal-dk:   #004B62;
  --teal-soft: #D7ECF1;
  --red:       #B3121F;   /* action, and only action */
  --red-dk:    #820D17;
  --amber:     #FFC14D;   /* price and coupon fill - never text */
  --amber-soft:#FFF3D6;
  --green:     #1F8A4C;   /* tick marks: 4.6:1 on white */

  --link:      #006786;
  --link-hover:#004B62;

  /* ---- elevation ------------------------------------------------------- */
  --shadow-1: 0 1px 2px rgba(0, 45, 60, .06), 0 2px 8px rgba(0, 45, 60, .05);
  --shadow-2: 0 2px 6px rgba(0, 45, 60, .07), 0 10px 28px rgba(0, 45, 60, .09);

  /* ---- type ------------------------------------------------------------ */
  --font-display: "Outfit", "Segoe UI", system-ui, sans-serif;
  --font-body:    "DM Sans", "Segoe UI", system-ui, -apple-system, sans-serif;

  --step--1: 0.875rem;
  --step-0:  1.0625rem;
  --step-1:  1.1875rem;
  --step-2:  1.375rem;
  --step-3:  1.75rem;
  --step-4:  2.375rem;
  --step-5:  3rem;

  /* ---- space ----------------------------------------------------------- */
  --s-1: .5rem;  --s-2: .75rem; --s-3: 1rem; --s-4: 1.5rem;
  --s-5: 2rem;   --s-6: 3rem;   --s-7: 4.5rem;

  --radius:    18px;
  --radius-sm: 10px;
  --wrap:      1140px;
  --gutter:    1.25rem;
  --tap:       44px;
  --nav-h:     72px;
}

@media (min-width: 768px)  { :root { --gutter: 2rem; } }
@media (max-width: 767px)  { :root { --step-3: 1.5rem; --step-4: 1.875rem; --step-5: 2.25rem; --s-7: 3rem; --nav-h: 64px; } }