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

   Palette: drawn directly from the OnlineUni logo.
     Ink       #16181D   the wordmark black: headers, footers, dark panels
     Brand     #A51C30   the UNI orange: primary buttons, links, active states
     Teal      #14B8A6   progress and success only — never a brand accent
     Canvas    #FAF9F7   warm paper white, so cards read as raised surfaces

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

:root {
  /* ---- Brand ---- */
  --tg-navy:          #16181D;  /* Ink charcoal — primary dark (name kept for compatibility) */
  --tg-navy-700:      #23262E;  /* Raised charcoal — cards on dark, hover */
  --tg-navy-900:      #0C0D10;  /* Deepest charcoal — footer base */

  --tg-royal:         #A51C30;  /* Logo orange — the conversion colour */
  --tg-royal-dark:    #8B1A1A;  /* Pressed / hover */
  --tg-electric:      #C45C6A;  /* Bright orange — highlights, gradients */

  --tg-teal:          #14B8A6;  /* Teal — progress and completion only */
  --tg-teal-dark:     #0F9488;  /* Pressed / hover */

  /* ---- Neutrals (warmed to sit with the orange) ---- */
  --tg-canvas:        #FAF9F7;  /* Paper white — page background */
  --tg-surface:       #FFFFFF;  /* White — cards and content areas */
  --tg-surface-sunk:  #F3F1EE;  /* Recessed panels, table stripes */
  --tg-info-bg:       #FDF6F7;  /* Light orange — information panels */

  /* Every text tier below clears WCAG AA (4.5:1) on all four light surfaces. */
  --tg-ink:           #131417;  /* Headings and emphasis */
  --tg-body:          #4A4E57;  /* Body text */
  --tg-muted:         #5B6068;  /* Secondary and meta text */
  --tg-faint:         #6B707A;  /* Captions, placeholders */
  --tg-disabled:      #9AA0A8;  /* Non-text only: disabled controls, icons */

  --tg-line:          #E8E5E0;  /* Default border */
  --tg-line-strong:   #D3D0CA;  /* Emphasised border, dividers */

  /* ---- Status ---- */
  --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 */
  --tg-royal-text:    #8B1A1A;  /* Orange as link text on light — 5.1:1 on white */

  /* ---- On-dark text (ink surfaces) ---- */
  --tg-on-navy:       #FFFFFF;
  --tg-on-navy-soft:  rgba(255, 255, 255, 0.88);
  --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);
  /* Full-strength orange vibrates on charcoal; these lifted tints read cleanly. */
  --tg-on-navy-link:  #E4B3B8;
  --tg-on-navy-accent:#FF9C6B;

  /* ---- Gradients ---- */
  --tg-grad-brand:    linear-gradient(135deg, #16181D 0%, #8B1A1A 100%);
  --tg-grad-action:   linear-gradient(135deg, #A51C30 0%, #C45C6A 100%);
  --tg-grad-hero:     linear-gradient(160deg, #16181D 0%, #23262E 55%, #43210F 100%);

  /* ---- Elevation ---- */
  --tg-shadow-sm:     0 1px 2px rgba(22, 24, 29, 0.06);
  --tg-shadow:        0 6px 18px rgba(22, 24, 29, 0.07);
  --tg-shadow-lg:     0 18px 40px rgba(22, 24, 29, 0.12);
  --tg-shadow-navy:   0 12px 28px rgba(22, 24, 29, 0.28);
  --tg-shadow-royal:  0 12px 28px rgba(165, 28, 48, 0.26);

  /* ---- 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 dark ---- */
  --tg-focus:         0 0 0 3px rgba(165, 28, 48, 0.38);
  --tg-focus-on-navy: 0 0 0 3px rgba(255, 255, 255, 0.55);

  /* ---- Subject accents ------------------------------------------------
     A secondary identifier only. The brand stays ink and orange; these tint
     a single small element on a card (never a whole section).
     -------------------------------------------------------------------- */
  --tg-subject-business:    #8B1A1A;
  --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);
}