/* ============================================================================
   tokens.css — Design-token foundation for webworkskc.com
   ----------------------------------------------------------------------------
   Single source of truth for the palette, type, radii, shadows, spacing, and
   the component recolor/tint hooks. Loaded FIRST — before style.css,
   components.css, and any per-page sheet — so every stylesheet shares one
   foundation. Change a value here and it updates everywhere.

   Palette: #0093cb blue · #faa300 orange · #283139 text
   Fonts:   Poppins (headings) · Open Sans (body)
   Last updated: 2026-06-18 UTC
   ============================================================================ */
:root {
  /* ---- Brand blues ---- */
  --blue:          #0093cb;
  --blue-dk:       #0078a6;
  --blue-xdk:      #005f87;
  --blue-lt:       #33aad5;
  --blue-pale:     #dcf0fa;
  --blue-ghost:    #f0f9fd;
  --blue-bg:       #e8f5fb;

  /* ---- Brand oranges ---- */
  --orange:        #faa300;
  --orange-dk:     #d98900;
  --orange-lt:     #fbb830;
  --orange-pale:   #fff9e8;
  --orange-bg:     #fffaf0;

  /* ---- Text ---- */
  --text:          #283139;
  --text-md:       #4b5a67;
  --text-lt:       #6b7e8c;
  --text-xlt:      #95a9b7;

  /* ---- Surfaces / borders ---- */
  --white:         #ffffff;
  --bg:            #f7fbfe;
  --bg-alt:        #eef7fc;
  --border:        #c8e2f2;
  --border-lt:     #e0eef7;

  /* ---- Rainbow accent ramp (ROYGBIV) ----
     The site's ONE shared accent palette. Brand orange (--rb-2) and brand
     blue (--rb-5) are the fixed anchors; the other five are tuned to match
     their saturation/brightness. Components recolor through --accent; the
     `.rainbow` utility (components.css) + the rainbow script (main.js) rotate
     these in order across a container — and continuously down the page. */
  --rb-1: #e8463a;       /* red    */
  --rb-2: var(--orange); /* orange — = brand --orange (the one source) */
  --rb-3: #f4e21e;       /* yellow */
  --rb-4: #22a86a;       /* green  */
  --rb-5: var(--blue);   /* blue   — = brand --blue (the one source) */
  --rb-6: #4353a5;       /* indigo */
  --rb-7: #8b5cf6;       /* violet */
  --rb-stops: 7;     /* number of rainbow stops — source of truth; main.js reads this var */

  /* Named aliases for DIRECT (non-rotating) picks — readable handles for the
     same seven stops above (no new colours; single source of truth stays --rb-1..7).
     Use these when you want one specific colour, e.g. color:var(--rb-green); use
     the numbered stops / the `.rainbow` utility when you want the rotation. */
  --rb-red:    var(--rb-1);
  --rb-orange: var(--rb-2);
  --rb-yellow: var(--rb-3);
  --rb-green:  var(--rb-4);
  --rb-blue:   var(--rb-5);
  --rb-indigo: var(--rb-6);
  --rb-violet: var(--rb-7);


  /* ---- Type ---- */
  --font-head: 'Poppins', sans-serif;
  --font-body: 'Open Sans', sans-serif;

  /* ---- Radii ---- */
  --rad-sm:  6px;
  --rad-md:  12px;
  --rad-lg:  20px;
  --rad-xl:  28px;
  --rad-full:9999px;

  /* ---- Shadows ---- */
  --shadow-sm:  0 2px 8px  rgba(0,147,203,0.08);
  --shadow-md:  0 6px 24px rgba(0,147,203,0.12);
  --shadow-lg:  0 14px 48px rgba(0,147,203,0.16);
  --shadow-card:0 4px 20px rgba(40,49,57,0.08);

  /* ---- Motion / layout ---- */
  --trans: all 0.26s ease;
  --cont:  1220px;
  --sv:    88px;   /* section vertical padding (overridden at breakpoints in style.css) */

  /* ---- Component hooks (consumed by components.css) ---- */
  --accent:      var(--blue);            /* recolor any component: style="--accent:var(--rb-green)" */
  --tint-blue:   rgba(0,147,203,.10);    /* blue at 10% — soft pill / tint fills */
  --tint-orange: rgba(250,163,0,.12);    /* orange at 12% — reserved for soft orange components */
}