/* ============================================================
   vth-tokens.css — VTH ReSkin design tokens
   Global custom properties (harmless — set no styles, only vars).
   Values trace to the design system tokens/*.css. Reference these
   variables in vth-reskin.css; never hardcode hex/px.
   ============================================================ */
:root{
  /* ---- Font ---- */
  --font-sans:"Poppins",system-ui,-apple-system,"Segoe UI",sans-serif;
  --weight-regular:400;--weight-medium:500;--weight-semibold:600;--weight-bold:700;

  /* ---- Brand ---- */
  --vth-blue:#192AC1;--vth-blue-hover:#1A2CE8;--vth-blue-focus:#1D2C92;--vth-blue-dark:#040E66;
  --vth-yellow:#FFB900;--vth-red:#EB3939;

  /* ---- Text ---- */
  --text-primary:#131313;--text-secondary:#2B2B2B;--text-subtle:#5D5D5D;--text-muted:#6D6D6D;
  --text-on-blue:#FFFFFF;--text-link:#192AC1;

  /* ---- Surfaces ---- */
  --surface-page:#FFFFFF;--surface-subtle:#F9F9F9;--surface-muted:#F6F6F6;
  --surface-card:#FFFFFF;--surface-blue-soft:#DAE9FF;--surface-dark:#2B2B2B;

  /* ---- Borders / feedback ---- */
  --border-light:#E7E7E7;--border-default:#D1D1D1;--border-strong:#0D0D0D;--border-blue:#192AC1;
  --color-error:#D92929;--color-error-hover:#EB3939;--color-success:#187D3F;

  /* ---- Radii ---- */
  --radius-xs:4px;--radius-sm:6px;--radius-md:8px;--radius-lg:12px;--radius-xl:16px;--radius-2xl:24px;--radius-pill:999px;

  /* ---- Spacing ---- */
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;
  --space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;

  /* ---- Shadows ---- */
  --shadow-xs:0 1px 2px rgba(0,0,0,.05);
  --shadow-sm:0 1px 3px rgba(0,0,0,.1),0 1px 2px rgba(0,0,0,.06);
  --shadow-md:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.05);
  --shadow-lg:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.05);
  --shadow-focus-blue:0 0 0 4px rgba(25,42,193,.15);
  /* Brand-tinted lift, for the one card in a set that is being recommended. Same
     geometry as --shadow-md's first layer, tinted instead of neutral. From the design
     source's `compare` data (0 4px 6px -1px rgba(25,42,193,.10)). */
  --shadow-blue-sm:0 4px 6px -1px rgba(25,42,193,.10);

  /* ---- Course Test additions (added, never overriding existing tokens) ---- */
  --surface-app:#F4F5F7;--divider:#EAECF0;
  --vth-blue-deep:#2B2FA8;--vth-blue-soft-alt:#EAF0FF;
  --surface-tint:#EDF2FF;--surface-tint-soft:#F5F7FF;
  --radius-10:10px;--radius-14:14px;--radius-20:20px;
  /* Status palette from the Course Test design spec. Kept separate from
     --color-success / --color-error so existing vth pages are untouched. */
  --status-success-fg:#027A48;--status-success-bg:#E7F7EF;--status-success-border:#A6E9C8;--status-success-accent:#12B76A;
  --status-warning-fg:#8A5A00;--status-warning-bg:#FFF6E5;--status-warning-border:#FFD98A;--status-warning-accent:#E0A400;
  --status-danger-fg:#B42318;--status-danger-bg:#FEF3F2;--status-danger-border:#FDA29B;--status-danger-accent:#B42318;

  /* ---- Type scale (desktop) ---- */
  --type-size-title-1:56px;--type-leading-title-1:67px;
  --type-size-title-2:48px;--type-leading-title-2:58px;
  --type-size-title-3:42px;--type-leading-title-3:57px;
  --type-size-title-4:40px;--type-leading-title-4:54px;
  --type-size-title-5:28px;--type-leading-title-5:38px;
  --type-size-title-6:24px;--type-leading-title-6:34px;
  --type-size-3xl:32px;--type-leading-3xl:38px;
  --type-size-xl:20px;--type-leading-xl:30px;
  --type-size-lg:18px;--type-leading-lg:27px;
  --type-size-base:16px;--type-leading-base:24px;
  --type-size-sm:15px;--type-leading-sm:23px;
  --type-size-xs:14px;--type-leading-xs:21px;
  --type-size-xxs:13px;--type-leading-xxs:20px;
  --type-size-2xs:12px;--type-leading-2xs:18px;
}

/* Mobile type mode — set data-type-mode="mobile" on/above .vth at small viewports */
[data-type-mode="mobile"]{
  --type-size-title-1:32px;--type-leading-title-1:39px;
  --type-size-title-2:26px;--type-leading-title-2:31px;
  --type-size-title-3:20px;--type-leading-title-3:27px;
  --type-size-title-4:24px;--type-leading-title-4:32px;
  --type-size-title-5:20px;--type-leading-title-5:27px;
  --type-size-title-6:18px;--type-leading-title-6:25px;
  --type-size-3xl:18px;--type-leading-3xl:22px;
  --type-size-xl:16px;--type-leading-xl:24px;
  --type-size-lg:16px;--type-leading-lg:24px;
  --type-size-base:14px;--type-leading-base:21px;
}

/* ============================================================
   UI COLOUR TOKENS — badges, formats, progress, status, chrome
   Added for the course-detail reskin (PHASE-0-ANALYSIS.md R-21),
   but authored as the GENERAL layer: every colour group in the
   design export's light mode is here, not only the seven the
   course pages happen to need. Future modules consume these
   instead of re-deriving hex.

   Source: Light_default_colors.md (light mode). Group names in
   comments are the design-system token paths, so a value can be
   traced back and a regenerated export diffed against this file.

   Scope note: these are :root custom properties. They set no
   styles, so adding them is inert until a `.vth`-scoped rule
   references one — nothing outside the scope changes.

   NOT here, deliberately:
     - sector colours          → vth-reskin/sectors.css
     - brand blue / greys / radii / spacing / shadows / type
                               → the blocks above in this file
   ============================================================ */
:root{

  /* ---- Badges — Badges/* ------------------------------------
     `-bg` is the fill, `-ink` the text AND icon colour.
     These carry MEANING. sector-theming.md §6: never sector
     themed — a green "Completed" badge is green in every sector. */
  --pc-blue-900:#1D2C92;
  --pc-green-100:#DDFBE7;--pc-green-800:#186336;
  --pc-red-50:#FEF2F2;--pc-red-100:#FEE2E2;--pc-red-800:#971D1D;
  --pc-yellow-100:#FFF2D1;--pc-yellow-800:#984D08;
  /* --pc-default-grey-70, the hairline used between table rows and on
     modal chrome — one step lighter than --border-light. */
  --border-subtle:#EAECF0;
  --badge-green-bg:#89ECAE;      --badge-green-ink:#16512D;
  --badge-green-bg-2:#63E26E;
  --badge-yellow-bg:#FFDA79;     --badge-yellow-ink:#4A3200;
  --badge-yellow-bg-2:#FFB900;   --badge-yellow-ink-2:#0D0D0D;
  --badge-blue-bg:#D3EDFF;       --badge-blue-ink:#1D2C92;
  --badge-blue-bg-2:#C5DCFF;
  --badge-countries-bg:#DAE9FF;  --badge-countries-ink:#040E66;
  --badge-purple-bg:rgb(243, 232, 255);     --badge-purple-ink:rgb(91, 33, 182);
  --badge-purple-bg-2:#D693FD;
  --badge-pink-bg:#FFB3DC;       --badge-pink-ink:#0D0D0D;
  --badge-pink-bg-2:#EE8DDC;
  --badge-pink-soft-bg:#FEE5F3;  --badge-pink-soft-ink:#A70D4A;
  --badge-yellowgreen-bg:#DEF090;--badge-yellowgreen-ink:#0D0D0D;
  --badge-cyan-bg:#CEFAFE;       --badge-cyan-ink:#104E64;
  --badge-indigo-bg:#E0E7FF;     --badge-indigo-ink:#372AAC;
  --badge-red-bg:#EB3939;        --badge-red-ink:#FEF2F2;
  --badge-grey-bg:#F6F6F6;       --badge-grey-ink:#2B2B2B;

  /* ---- Delivery formats -------------------------------------
     Aliases, not duplicates: these encode DELIVERY METHOD, so a
     mixed listing stays readable at a glance. Named separately
     from the badge themes they currently borrow so the two can
     diverge later without touching every badge.
     sector-theming.md §6: never sector themed. */
  --format-online-bg:var(--badge-green-bg);
  --format-online-ink:var(--badge-green-ink);
  --format-venue-bg:var(--badge-yellow-bg);
  --format-venue-ink:var(--badge-yellow-ink);
  --format-virtual-bg:var(--badge-countries-bg);
  --format-virtual-ink:var(--badge-countries-ink);

  /* ---- Progress — Progress/* --------------------------------
     `-strong` is the accessible-on-white variant; the plain one
     is the bar fill. */
  --progress-complete:#1DAF54;        --progress-complete-strong:#187D3F;
  --progress-inprogress:#4668FF;      --progress-inprogress-strong:#192AC1;
  --progress-notstarted:#F6F6F6;      --progress-notstarted-strong:#E7E7E7;
  --progress-notpassed-strong:#D92929;
  --progress-notallocated:#EB3939;
  --progress-overdue:#971D1D;

  /* ---- Status / result — Icons/Result/*, Elements/*, Error/* */
  --status-success:#187D3F;
  --status-error:#D92929;
  --status-error-hover:#EB3939;
  --status-error-focus:#B71E1E;
  --status-error-text:#971D1D;
  --status-error-light:#F67373;
  --status-warning:#E28E00;
  /* Pale grounds for status icons/blocks. Error ground is Badges/Red/Text,
     which is the palest red in the export; named by role, not by origin. */
  /* Dialog scrim: --text-primary at 50%. A token because INSTRUCTIONS §9.1
     allows no literal outside this file, alpha included. */
  --scrim-backdrop:rgba(19,19,19,.5);
  --surface-error-soft:#FEF2F2;
  --surface-success-soft:#DDFBE7;
  --surface-warning-soft:#FFF2D1;

  /* ---- Buttons — Buttons/* ----------------------------------
     Brand-palette button surfaces. The SECTOR-themed primary and
     secondary live in sectors.css; these are the variants that
     stay brand-coloured on every surface, in every sector.
     `--btn-white-*` is the design system's `white` variant — the
     second action on the public course-detail page. */
  --btn-white-bg:#FFFFFF;             --btn-white-ink:#131313;
  --btn-secondary-grey-bg:#F6F6F6;
  --btn-secondary-blue-bg:#DAE9FF;
  --btn-round-bg:#EAECF0;
  --btn-yellow-bg:#FFB900;
  --btn-disabled-bg:#E7E7E7;
  --btn-disabled-primary-bg:#DAE9FF;
  --btn-textlink:#6BA0FF;
  --btn-icon:#192AC1;

  /* ---- Tabs — Tabs/* ---------------------------------------- */
  --tab-ink:#131313;                  --tab-ink-active:#192AC1;
  --tab-pill-bg:#FFFFFF;              --tab-pill-bg-active:#F6F6F6;

  /* ---- Favourite — Favoriets/* ------------------------------
     The heart on the course image. Default is a white glyph on a
     dark scrim so it reads over any photo. */
  --fav-heart:#FFFFFF;
  --fav-heart-selected:#D92929;
  --fav-scrim:#4E4E4E;

  /* ---- Referral / share method — Referral sources/* ---------
     Magic Link "Share Method" column. */
  --share-email:#F83C98;
  --share-facebook:#1A2CE8;
  --share-linkedin:#0673FF;
  --share-whatsapp:#1DAF54;
  --share-mobile:#FFB900;
  --share-unknown:#EAECF0;

  /* ---- Compliance — Compliance Percentage/* ----------------- */
  --compliance-seen:#FFB900;
  --compliance-signed-off:#187D3F;
  --compliance-not-seen:#F6F6F6;

  /* ---- Public website chrome — BG/Website/* -----------------
     The footer is #272727 in EVERY sector (sector-theming.md §6). */
  --website-section-bg:#F3F4F8;
  --website-stat-card-bg:#EEF0F9;
  --website-footer-bg:#272727;

  /* ---- Extra surfaces / strokes / dividers ------------------
     Complements --surface-* and --border-* above. */
  --surface-yellow-soft:#FFF2D1;
  --surface-yellow-warm:#FFF8EC;
  --surface-green-soft:rgb(137, 236, 174);
  --surface-green:#BDF5D1;
  --surface-blue-light:#DAE9FF;
  --surface-blue-mid:#93BAFF;
  --surface-dark-dot:#0D0D0D;
  --stroke-yellow-light:#FFDA79;
  --stroke-blue-light:#DAE9FF;
  --divider-light:#F6F6F6;
  --divider-grey:#EAECF0;
}
body {
   margin: 0;
   background: #F4F5F7;
   font-family: "Poppins", system-ui, sans-serif;
}
section.vth-page{
   padding: unset;
}

/* ============================================================
   Offers additions — tokens the offer page's design uses that the
   set above did not carry. Names and values copied verbatim from the
   design system (tokens/token-colors.css, primary-colors.css).
   Additive only: nothing above is changed.
   ============================================================ */
:root{
  --tc-bg-website-sections-website:#F3F4F8;
  --tc-bg-website-statistics-card-website:#EEF0F9;
  --tc-buttons-secondary-blue-default:#DAE9FF;
  --tc-buttons-disabled:#E7E7E7;
  --tc-buttons-disabled-primary:#DAE9FF;
  --tc-badges-blue-bg:#D3EDFF;--tc-badges-blue-text-icon:#1D2C92;
  --tc-badges-yellow-bg:#FFDA79;--tc-badges-yellow-text-icon:#4A3200;
  --tc-badges-green-bg:#89ECAE;
  --tc-badges-grey-bg:#F6F6F6;--tc-badges-grey-text:#2B2B2B;
  --tc-bg-yellow-light-yellow:#FFF2D1;
  --pc-blue-100:#DAE9FF;
}

/* ============================================================
   Offers additions — tokens the offer page's design uses that the
   set above did not carry. Names and values copied verbatim from the
   design system (tokens/token-colors.css, primary-colors.css).
   Additive only: nothing above is changed.
   ============================================================ */
:root{
  --tc-bg-website-sections-website:#F3F4F8;
  --tc-bg-website-statistics-card-website:#EEF0F9;
  --tc-buttons-secondary-blue-default:#DAE9FF;
  --tc-buttons-disabled:#E7E7E7;
  --tc-buttons-disabled-primary:#DAE9FF;
  --tc-badges-blue-bg:#D3EDFF;--tc-badges-blue-text-icon:#1D2C92;
  --tc-badges-yellow-bg:#FFDA79;--tc-badges-yellow-text-icon:#4A3200;
  --tc-badges-green-bg:#89ECAE;
  --tc-badges-grey-bg:#F6F6F6;--tc-badges-grey-text:#2B2B2B;
  --tc-bg-yellow-light-yellow:#FFF2D1;
  --pc-blue-100:#DAE9FF;
}