/* ==========================================================================
   TILGlobal design tokens — single source of truth for colour.

   Palette: "Global Professional"
     Navy      credibility   headers, footers, hero panels, major headings
     Royal     action        primary buttons, links, active states
     Teal      progress      secondary CTAs, progress, completion
     Canvas    calm          page background, so white cards read as surfaces

   Load this BEFORE any other stylesheet. Every other sheet should reference
   these variables rather than repeating hex literals.
   ========================================================================== */

:root {
  /* ---- Brand ---- */
  --tg-navy:          #0B1F3A;  /* Midnight navy — primary brand */
  --tg-navy-700:      #12304F;  /* Raised navy — cards on navy, hover */
  --tg-navy-900:      #071528;  /* Deepest navy — footer base */

  --tg-royal:         #2563EB;  /* Royal blue — the conversion colour */
  --tg-royal-dark:    #1D4ED8;  /* Pressed / hover */
  --tg-electric:      #3B82F6;  /* Electric blue — highlights, gradients */

  --tg-teal:          #14B8A6;  /* Teal — secondary CTA, progress */
  --tg-teal-dark:     #0F9488;  /* Pressed / hover */

  /* ---- Neutrals ---- */
  --tg-canvas:        #F8FAFC;  /* Warm white — page background */
  --tg-surface:       #FFFFFF;  /* White — cards and content areas */
  --tg-surface-sunk:  #F1F5F9;  /* Recessed panels, table stripes */
  --tg-info-bg:       #EFF6FF;  /* Light blue — information panels */

  /* Every text tier below clears WCAG AA (4.5:1) on all four light surfaces —
     canvas, surface, sunk and info-bg — not just on pure white. */
  --tg-ink:           #0F172A;  /* Headings and emphasis      — 16.9:1 on white */
  --tg-body:          #475569;  /* Slate — body text          —  7.6:1 */
  --tg-muted:         #556274;  /* Secondary and meta text    —  6.2:1 */
  --tg-faint:         #626F84;  /* Captions, placeholders     —  4.7:1 */
  --tg-disabled:      #94A3B8;  /* Non-text only: disabled controls, icons */

  --tg-line:          #E2E8F0;  /* Default border */
  --tg-line-strong:   #CBD5E1;  /* Emphasised border, dividers */

  /* ---- Status ----
     The base tokens are tuned as fills (badge and banner backgrounds). Their
     -text partners are darkened so the same colour can be read as small text
     on a light surface, where the fill versions fall well below 4.5:1. */
  --tg-success:       #16A34A;
  --tg-success-text:  #15803D;
  --tg-success-bg:    #ECFDF5;
  --tg-warning:       #F59E0B;
  --tg-warning-text:  #B45309;
  --tg-warning-bg:    #FFFBEB;
  --tg-danger:        #DC2626;
  --tg-danger-text:   #B91C1C;
  --tg-danger-bg:     #FEF2F2;
  --tg-info:          var(--tg-royal);

  --tg-teal-text:     #0F766E;  /* Teal as small text on light — 5.5:1 */
  --tg-royal-text:    #1D4ED8;  /* Royal as link text on light — 6.7:1 */

  /* ---- On-dark text (navy surfaces) ---- */
  --tg-on-navy:       #FFFFFF;
  --tg-on-navy-soft:  rgba(255, 255, 255, 0.88);  /* Hero standfirsts */
  --tg-on-navy-muted: rgba(255, 255, 255, 0.72);
  --tg-on-navy-faint: rgba(255, 255, 255, 0.60);
  --tg-on-navy-line:  rgba(255, 255, 255, 0.14);
  /* Royal is far too dark to read on navy (2.6:1); use these instead. */
  --tg-on-navy-link:  #93C5FD;
  --tg-on-navy-accent:#7DD3FC;

  /* ---- Gradients (used sparingly, per the brand direction) ---- */
  --tg-grad-brand:    linear-gradient(135deg, #0B1F3A 0%, #2563EB 100%);
  --tg-grad-action:   linear-gradient(135deg, #2563EB 0%, #14B8A6 100%);
  --tg-grad-hero:     linear-gradient(160deg, #0B1F3A 0%, #12304F 55%, #1E3A8A 100%);

  /* ---- Elevation ---- */
  --tg-shadow-sm:     0 1px 2px rgba(11, 31, 58, 0.06);
  --tg-shadow:        0 6px 18px rgba(11, 31, 58, 0.07);
  --tg-shadow-lg:     0 18px 40px rgba(11, 31, 58, 0.12);
  --tg-shadow-navy:   0 12px 28px rgba(11, 31, 58, 0.28);
  --tg-shadow-royal:  0 12px 28px rgba(37, 99, 235, 0.28);

  /* ---- Shape ---- */
  --tg-radius-sm:     8px;
  --tg-radius:        14px;
  --tg-radius-lg:     18px;
  --tg-radius-pill:   999px;

  /* ---- Focus ring — must stay visible on both light and navy ---- */
  --tg-focus:         0 0 0 3px rgba(37, 99, 235, 0.35);
  --tg-focus-on-navy: 0 0 0 3px rgba(255, 255, 255, 0.55);

  /* ---- Subject accents ------------------------------------------------
     A secondary identifier only. The brand stays navy; these tint a single
     small element on a card (never a whole section).
     -------------------------------------------------------------------- */
  --tg-subject-business:    #2563EB;
  --tg-subject-finance:     #059669;
  --tg-subject-healthcare:  #14B8A6;
  --tg-subject-it:          #4F46E5;
  --tg-subject-ai:          #7C3AED;
  --tg-subject-security:    #6D28D9;
  --tg-subject-marketing:   #EA580C;
  --tg-subject-hr:          #E11D48;
  --tg-subject-logistics:   #D97706;
  --tg-subject-hospitality: #F43F5E;
  --tg-subject-education:   #0EA5E9;
  --tg-subject-psychology:  #C026D3;
}

/* Accessible focus for keyboard users across every surface. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--tg-focus);
  border-radius: var(--tg-radius-sm);
}