/* ===========================================================================
   Training Combined — brand tokens
   Single source of truth for colour, type and component shape.

   WHY THIS FILE EXISTS
   Every page used to carry its own inline :root block. Three different design
   systems drifted apart as a result, and a brand sweep on 4 Aug 2026 had to
   touch four files and still missed an orange button inside the email module.
   Change brand values HERE and nowhere else.

   AUTHORITY
   These values are taken from the LIVE trainingcombined.com.au, not from a
   supplied PDF. The site runs Jost with #29ABE2 on every Book Now and contains
   no orange at all. Fresh Digital's style-kit PDF specifies orange #E37029 for
   primary buttons; that contradicts the site it documents and is NOT used.
   See reference/Fresh Digital/Style Kit/README-SUPERSEDED.md.

   SAFE TO LINK ANYWHERE
   This file deliberately defines tokens and *opt-in* classes only (.tc-*).
   It contains no bare element selectors, so linking it onto a page does not
   change that page's appearance until its markup opts in. That is what makes
   it safe to add to the homepage and landing pages before they are restyled.
   =========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Jost:wght@400;500;600;700&display=swap');

:root{
  /* --- palette ------------------------------------------------------- */
  --tc-blue:#29ABE2;          /* primary action, headings, links, active   */
  --tc-blue-dark:#1c8fbe;     /* primary hover                             */
  --tc-blue-light:#2FC5F7;    /* highlight on dark                         */
  --tc-blue-tint:#e6f5fd;     /* badge / info panel fill                   */
  --tc-blue-line:#bfe6f8;     /* border on tinted panels                   */
  --tc-blue-wash:#f3fbfe;     /* selected-row wash                         */
  --tc-blue-deep:#1c88b4;     /* text on tinted panels                     */

  --tc-black:#000000;         /* body text, prices                         */
  --tc-ink:#2b3a45;           /* neutral emphasis / scarcity pill          */
  --tc-grey:#707070;          /* secondary + meta text                     */
  --tc-muted:#8ea3b1;         /* inactive steps                            */
  --tc-bg:#F5F7F9;            /* page background                           */
  --tc-line:#dde5eb;          /* borders, rules, dividers                  */
  --tc-line-soft:#eef2f5;     /* table rules                               */
  --tc-white:#ffffff;

  --tc-danger:#ef4444;        /* validation errors only                    */

  /* NOTE: there is deliberately no orange token. The live website uses no
     orange. Scarcity and warnings use --tc-ink (neutral), not a warm colour. */

  /* --- type ---------------------------------------------------------- */
  --tc-font:'Jost',sans-serif;
  --tc-font-email:'Helvetica Neue',Arial,sans-serif; /* Outlook ignores webfonts */
  --tc-track-heading:.02em;
  --tc-track-meta:.08em;

  /* --- shape --------------------------------------------------------- */
  --tc-radius-card:14px;
  --tc-radius-btn:999px;
  --tc-radius-input:9px;
  --tc-shadow:0 2px 12px rgba(10,40,60,.06);
  --tc-shadow-lg:0 6px 20px rgba(10,40,60,.12);
}

/* ===========================================================================
   OPT-IN CLASSES — add these to markup; they never apply on their own.
   =========================================================================== */

/* --- surface --------------------------------------------------------- */
.tc-page   { background:var(--tc-bg); color:var(--tc-black); font-family:var(--tc-font); }
.tc-card   { background:#fff; border:none; border-radius:var(--tc-radius-card); box-shadow:var(--tc-shadow); }
.tc-card--accent { border-top:4px solid var(--tc-blue); }

/* --- type ------------------------------------------------------------ */
.tc-h      { font-family:var(--tc-font); font-weight:600; letter-spacing:var(--tc-track-heading);
             text-transform:uppercase; color:var(--tc-black); }
.tc-meta   { font-family:var(--tc-font); font-size:11px; font-weight:600; color:var(--tc-grey);
             letter-spacing:var(--tc-track-meta); text-transform:uppercase; }
.tc-price  { font-family:var(--tc-font); font-weight:700; font-size:22px; color:var(--tc-black); }
.tc-link   { color:var(--tc-blue-deep); text-decoration:none; font-weight:500; }
.tc-link:hover { color:var(--tc-blue); text-decoration:underline; }

/* --- buttons ---------------------------------------------------------
   Primary = filled blue. Secondary = white with blue outline. This is the
   pairing the live website uses ("Book now" / "Book now, Pay later").
   -------------------------------------------------------------------- */
.tc-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--tc-font); font-weight:500; font-size:15px;
  text-transform:uppercase; letter-spacing:var(--tc-track-heading);
  padding:13px 26px; border-radius:var(--tc-radius-btn); border:none;
  cursor:pointer; text-decoration:none; transition:background .15s, color .15s, transform .1s;
}
.tc-btn--primary { background:var(--tc-blue); color:#fff; }
.tc-btn--primary:hover:not(:disabled) { background:var(--tc-blue-dark); }
.tc-btn--primary:disabled { background:#c3cdd4; cursor:not-allowed; }
.tc-btn--secondary { background:#fff; color:var(--tc-blue); border:1.5px solid var(--tc-blue); }
.tc-btn--secondary:hover { background:var(--tc-blue); color:#fff; }
.tc-btn:active:not(:disabled) { transform:scale(.99); }
.tc-btn:focus-visible { outline:3px solid rgba(41,171,226,.4); outline-offset:2px; }
.tc-btn--sm { font-size:13px; padding:10px 20px; }
.tc-btn--block { width:100%; }

/* --- pills ------------------------------------------------------------ */
.tc-pill { display:inline-block; font-family:var(--tc-font); font-size:10.5px; font-weight:600;
           letter-spacing:.06em; text-transform:uppercase; padding:5px 12px;
           border-radius:var(--tc-radius-btn); white-space:nowrap; }
.tc-pill--info    { background:var(--tc-blue-tint); color:var(--tc-blue-deep); }
.tc-pill--urgent  { background:var(--tc-ink); color:#fff; }
.tc-pill--neutral { background:var(--tc-line-soft); color:var(--tc-ink); }

/* --- form ------------------------------------------------------------- */
.tc-label { display:block; font-family:var(--tc-font); font-size:11px; font-weight:600;
            color:var(--tc-grey); letter-spacing:var(--tc-track-meta);
            text-transform:uppercase; margin-bottom:6px; }
.tc-input { width:100%; padding:12px 14px; border:1.5px solid var(--tc-line);
            border-radius:var(--tc-radius-input); font-family:var(--tc-font); font-size:16px;
            background:#fff; outline:none; transition:border-color .15s;
            -webkit-appearance:none; appearance:none; }
.tc-input:focus { border-color:var(--tc-blue); box-shadow:0 0 0 3px rgba(41,171,226,.15); }
.tc-input.is-error { border-color:var(--tc-danger); background:#fff5f5; }

/* --- header bar ------------------------------------------------------- */
.tc-header { background:#fff; border-bottom:1px solid #e7edf1; }
.tc-header__logo { height:46px; width:auto; display:block; }
.tc-header__meta { font-family:var(--tc-font); font-size:10.5px; font-weight:500; color:var(--tc-grey);
                   letter-spacing:.06em; text-transform:uppercase; line-height:1.3; }

/* --- step indicator --------------------------------------------------- */
.tc-step      { width:30px; height:30px; border-radius:50%; display:flex; align-items:center;
                justify-content:center; font-family:var(--tc-font); font-size:13px; font-weight:600;
                background:#dfe8ee; color:var(--tc-muted); flex-shrink:0; transition:background .2s,color .2s; }
.tc-step.is-on, .tc-step.is-done { background:var(--tc-blue); color:#fff; }
.tc-step-line { height:2px; flex:1; background:#dfe8ee; }
.tc-step-line.is-done { background:var(--tc-blue); }