/* ═══════════════════════════════════════════════════════
   GCDAY : Design tokens
   Maps 1:1 to the Webflow Variables collection captured in
   source-webflow/rendered-design/tokens.md, plus the spacing,
   type and motion tokens inferred from styles.md and
   typography.md (Webflow only tokenises colour).
═══════════════════════════════════════════════════════ */

:root {
  /* ─── Brand colour palette (the 11 Webflow Variables) */
  --purple:     #812166;
  --pink:       #e21b79;
  --red:        #e13c30;
  --orange:     #e77724;
  --yellow:     #fddd00;
  --green:      #43b049;
  --light-blue: #0b85c8;
  --dark-blue:  #215baa;
  --white-sub:  #f5f7f6;
  --dark-grey:  #161616;
  --purplefade: rgba(129, 33, 102, 0.25);

  /* Captured combo tokens for the three empty Webflow combos.
     yellow already exists as a brand variable above.
     teal was hard-coded inside the empty combo with no token,
     so this is the rebuild's authoritative value.
     purple already exists above. */
  --teal: #2a9d8f;

  /* ─── Readable-on-dark tints of the brand colours.

     Five of the eleven brand colours fail WCAG AA as text on the dark
     surface: purple sits at 2.02:1, dark blue 2.71, pink 4.02, red 4.21
     and light blue 4.48, against the 4.5:1 body-text bar. These are the
     same hues lifted in lightness only, each measured to clear 4.5:1 on
     #161616, so the brand reads the same while the words stay legible.

     Use these anywhere a brand colour becomes TEXT. The originals stay
     correct for fills, rules and borders, which carry no contrast duty. */
  --purple-on-dark:     #d14bab;   /* 4.57:1 */
  --dark-blue-on-dark:  #3e80da;   /* 4.57:1 */
  --pink-on-dark:       #e73589;   /* 4.54:1 */
  --red-on-dark:        #e3493d;   /* 4.56:1 */
  --light-blue-on-dark: #0b88cd;   /* 4.67:1 */

  /* ─── Surface roles */
  --surface-bg:       var(--dark-grey);
  --surface-text:     var(--white-sub);
  --surface-text-dim: rgba(245, 247, 246, 0.72);
  --surface-border:   var(--white-sub);
  --surface-card-bg:  #1f1f1f;
  --shadow-soft:      0 4px 24px 0 hsla(214.83, 17.32%, 64.90%, 0.08);
  --shadow-purple:    0 10px 20px -3px var(--purplefade);

  /* ─── Type */
  --font-sans:   "Jost", "Futura PT", "Trebuchet MS", Arial, sans-serif;
  --weight-light:   300;
  --weight-medium:  500;
  --weight-semi:    600;
  --weight-bold:    700;

  --text-xs:    12px;
  --text-sm:    14px;
  --text-base:  16px;
  --text-lg:    20px;
  --text-xl:    24px;
  --text-2xl:   30px;
  --text-3xl:   45px;
  --text-4xl:   55px;
  --text-hero:  clamp(36px, 6.5vw, 88px);

  --leading-tight:  1;
  --leading-snug:   1.15;
  --leading-body:   1.5;

  --tracking-ui:        0.25px;
  --tracking-eyebrow:   1px;
  --tracking-allcaps:   2px;

  /* ─── Spacing (inferred from styles.md padding rhythms) */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  40px;
  --sp-8:  60px;
  --sp-9:  80px;
  --sp-10: 120px;

  /* ─── Radii & borders */
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  15px;
  --radius-pill: 999px;
  --border-image: 3px solid var(--surface-border);

  /* ─── Motion (the 200ms ease pattern lives across the catalogue) */
  --motion-fast:    120ms;
  --motion-base:    200ms;
  --motion-slow:    400ms;
  --ease-standard:  cubic-bezier(0.4, 0, 0.2, 1);
  --hover-shift:    translate(2px, 3px);

  /* ─── Layout */
  --container-max:    1720px;
  --container-narrow: 1140px;
  --container-prose:  940px;
  --page-gutter:      30px;
  --page-gutter-sm:   15px;

  /* Horizontal safe zone for body content so the decorative spinning
     icons (which sit in the outer ~12vw of the viewport) never overlap
     text. On narrow screens icons are barely visible so the regular
     page gutter applies; on wider screens the safe zone expands. */
  --content-safe-x:   var(--page-gutter);

  /* ─── Accent (page-level brand colour, overridden per service page).
     Used for non-cycling decorative elements: callout borders, divider
     strokes, feature card accents, banner overlay. The button cycle
     ignores this token. */
  --accent: var(--purple);
  --accent-text: var(--purple-on-dark);
}

/* Service-page brand identities. Set on <body class="service-green"> etc.

   Each sets two tokens. --accent is the colour itself, for fills, rules
   and borders. --accent-text is the same colour at a lightness that
   passes WCAG AA on the dark surface, for anything that is words. They
   are identical wherever the brand colour already reads well. */

body.service-green     { --accent: var(--green);      --accent-text: var(--green); }
body.service-lightblue { --accent: var(--light-blue); --accent-text: var(--light-blue-on-dark); }
body.service-darkblue  { --accent: var(--dark-blue);  --accent-text: var(--dark-blue-on-dark); }
body.service-yellow    { --accent: var(--yellow);     --accent-text: var(--yellow); }
body.service-teal      { --accent: var(--teal);       --accent-text: var(--teal); }
body.service-purple    { --accent: var(--purple);     --accent-text: var(--purple-on-dark); }
body.service-pink      { --accent: var(--pink);       --accent-text: var(--pink-on-dark); }
body.service-red       { --accent: var(--red);        --accent-text: var(--red-on-dark); }
body.service-orange    { --accent: var(--orange);     --accent-text: var(--orange); }