/* Turnkey — design tokens for the SME Accelerator application.
   Source: Turnkey Brand Guidelines (logo, fonts, palette) + Elizabeth's section palette (29 Sep 2026).
   Contrast ratios below are WCAG 2.x, measured against the backgrounds named. */

/* ---------- Fonts (self-hosted from ./brand/fonts; Jost = OFL, Aileron = CC0) ---------- */
@font-face { font-family: "Jost"; font-weight: 500; font-style: normal; font-display: swap;
  src: url("./brand/fonts/jost-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("./brand/fonts/jost-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Aileron"; font-weight: 300; font-style: normal; font-display: swap;
  src: url("./brand/fonts/aileron-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family: "Aileron"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("./brand/fonts/aileron-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Aileron"; font-weight: 400; font-style: italic; font-display: swap;
  src: url("./brand/fonts/aileron-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Aileron"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("./brand/fonts/aileron-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Aileron"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("./brand/fonts/aileron-latin-700-normal.woff2") format("woff2"); }

:root {
  /* Type */
  --tk-font-heading: "Jost", "Helvetica Neue", Arial, sans-serif;   /* headings: Jost SemiBold 600 */
  --tk-font-sub:     "Jost", "Helvetica Neue", Arial, sans-serif;   /* subheadings: Jost Medium 500 */
  --tk-font-body:    "Aileron", "Helvetica Neue", Arial, sans-serif; /* copy: Aileron 400 (300/600/700 available) */
  --tk-weight-heading: 600;
  --tk-weight-sub: 500;

  /* Brand palette (guidelines) */
  --tk-blue:   #1e313a;  /* brand Blue — cards, panels, text on bright fills */
  --tk-white:  #ffffff;
  --tk-orange: #ff633b;  /* 6.3:1 on navy, 4.6:1 on blue */
  --tk-green:  #9cc446;  /* 9.2:1 on navy */
  --tk-aqua:   #00a9ab;  /* 6.4:1 on navy */

  /* Page background = the swoosh images' own background, so they blend seamlessly */
  --tk-navy:   #0f112b;

  /* New colours (Elizabeth's palette) */
  --tk-violet: #a585ff;
  --tk-lemon:  #ffdd2e;
  --tk-pink:   #ff5c9d;

  /* Section colours — welcome screen circles 1–5 and the step indicator */
  --tk-section-1: var(--tk-orange);  /* About Your Business */
  --tk-section-2: var(--tk-violet);  /* Current Performance & Growth */
  --tk-section-3: var(--tk-green);   /* Business Capability */
  --tk-section-4: var(--tk-lemon);   /* Growth Planning */
  --tk-section-5: var(--tk-aqua);    /* Development Needs & Priorities */
  --tk-section-6: var(--tk-pink);    /* spare */

  /* 1–5 answer scale (Section 3 option cards) — TBC: Craig to provide. Placeholders only. */
  --tk-scale-1: #5a6a72;
  --tk-scale-2: #5a6a72;
  --tk-scale-3: #5a6a72;
  --tk-scale-4: #5a6a72;
  --tk-scale-5: #5a6a72;

  /* Text */
  --tk-text:        var(--tk-white);
  --tk-text-muted:  #b8c4ca;   /* 10.4:1 on navy, 7.6:1 on blue — use this, never dimmer, for helper text */
  --tk-text-on-bright: var(--tk-blue); /* text on orange/green/aqua/lemon/violet/pink fills (all ≥ 4.6:1) */

  /* Scoring status (reports, dashboard) — brand hexes */
  --tk-status-strong:     var(--tk-green);
  --tk-status-developing: var(--tk-aqua);
  --tk-status-focus:      var(--tk-orange);

  /* Components */
  --tk-radius: 10px;
  --tk-border: rgba(0, 169, 171, 0.45);      /* aqua hairline, as in the mockups */
  --tk-focus-ring: 0 0 0 3px var(--tk-lemon);
}

/* Section titles: ALL CAPS, Jost SemiBold */
.tk-section-title {
  font-family: var(--tk-font-heading);
  font-weight: var(--tk-weight-heading);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* Primary button: dark text on orange (white on orange is only 3.0:1) */
.tk-btn-primary {
  background: var(--tk-orange);
  color: var(--tk-text-on-bright);
  font-family: var(--tk-font-sub);
  font-weight: var(--tk-weight-heading);
}