/* Edsby re-skin — design tokens.
   Load this first, then base.css. Every colour, size and spacing value in the
   references resolves to one of these. If you find yourself typing a hex code
   into a template, it belongs here instead. */

:root {
  /* ---------------------------------------------------------------- colour */
  --eds-navy:        #06273d;  /* headings, dark sections, header bar, footer */
  --eds-blue:        #1075b9;  /* THE brand blue: links, buttons, the live band, the logo */
  --eds-gold:        #f1c602;  /* primary CTA fill and accents */
  --eds-mist:        #e8f1f9;  /* light section ground, icon tiles */
  --eds-pale:        #f5f9fc;  /* quieter ground: menu guide column, hover rows */
  --eds-sky:         #7aa7c4;  /* legacy footer muted; Solutions ground, "all" tiles */
  --eds-slate:       #4a5f6e;  /* secondary text on white */
  --eds-grey:        #d3d3d3;  /* hairlines and card borders */
  --eds-line:        #e6edf3;  /* lighter hairline inside cards and menus */
  --eds-white:       #ffffff;

  /* Header rule over navy: 1px rgba(122,167,196,.35), which flattens to #2f546c */
  --eds-rule-on-navy: rgba(122, 167, 196, 0.35);

  /* The character. Never alter these; see CHARACTER.md. */
  --eds-char-body-top:    #63a8db;
  --eds-char-body-bottom: #1a7bc0;
  --eds-char-antenna:     #5f96bf;
  --eds-char-pupil:       #3c2722;
  --eds-char-mouth:       #1c5986;

  /* ------------------------------------------------------------------ type */
  --eds-font-display: "Plus Jakarta Sans", system-ui, sans-serif;  /* headings, UI labels */
  --eds-font-body:    "Public Sans", system-ui, sans-serif;        /* body copy */
  --eds-font-quote:   "DM Serif Display", Georgia, serif;          /* the quote mark ONLY */

  /* Desktop sizes. base.css steps these down at each breakpoint. */
  --eds-h1:        46px;  --eds-h1-lh:        56px;
  --eds-h1-hero:   60px;  --eds-h1-hero-lh:   68px;  /* solution page heroes */
  --eds-h2:        34px;  --eds-h2-lh:        42px;
  --eds-h2-lg:     40px;  --eds-h2-lg-lh:     48px;
  --eds-h3:        24px;  --eds-h3-lh:        31px;
  --eds-lead:      19px;  --eds-lead-lh:      31px;
  --eds-body:      17px;  --eds-body-lh:      27px;
  --eds-small:     15px;  --eds-small-lh:     22px;
  --eds-micro:     13px;  --eds-micro-lh:     18px;
  --eds-eyebrow:   15px;  --eds-eyebrow-lh:   24px;  /* uppercase, 1.5px tracking, 600 */

  /* --------------------------------------------------------------- spacing */
  --eds-gutter-desktop: 112px;
  --eds-gutter-tablet:   40px;
  --eds-gutter-phone:    20px;
  --eds-content-max:   1216px;

  --eds-section-y:       96px;   /* standard section padding, desktop */
  --eds-section-y-tablet: 72px;
  --eds-section-y-phone:  56px;

  --eds-space-1:  4px;
  --eds-space-2:  8px;
  --eds-space-3: 12px;
  --eds-space-4: 16px;
  --eds-space-5: 24px;
  --eds-space-6: 32px;
  --eds-space-7: 48px;
  --eds-space-8: 64px;

  /* ---------------------------------------------------------------- shape */
  --eds-radius-none:  0;      /* cards, tiles, product screens: square */
  --eds-radius-sm:   10px;    /* menu rows, small buttons */
  --eds-radius-md:   14px;    /* listen card, sign-in card */
  --eds-radius-lg:   20px;    /* menu panel, news hero */
  --eds-radius-pill: 999px;   /* every pill button */

  --eds-shadow-card:  0 1px 2px rgba(6,39,61,.06), 0 12px 32px rgba(6,39,61,.10);
  --eds-shadow-lift:  0 6px 16px rgba(6,39,61,.22);
  --eds-shadow-panel: 0 24px 56px rgba(0,0,0,.30);
  --eds-shadow-char:  0 6px 10px rgba(6,39,61,.45);  /* character on Edsby Blue only */

  /* ------------------------------------------------------------ motion */
  --eds-ease:      cubic-bezier(.2, .6, .3, 1);
  --eds-t-hover:   180ms;
  --eds-t-press:    90ms;
  --eds-t-panel:   200ms;

  /* ------------------------------------------------------- breakpoints
     For reference; media queries cannot read custom properties. */
  --eds-bp-tablet:  600px;
  --eds-bp-desktop: 1024px;
}