/* ===========================================================================
   ZENTRA TALENT SOLUTIONS — DESIGN TOKENS
   Single source of truth for the visual language of the site.
   Every colour, type size, spacing value, radius, shadow and motion
   duration used anywhere on the site should reference a token defined
   here — never a hard-coded value in a component file.

   Contrast notes (WCAG 2.1 AA):
   - Tokens marked "text-safe on white" are verified ≥ 4.5:1 against
     #ffffff and may be used for body text, links and button labels.
   - Tokens marked "decorative / large-scale only" fall between 3:1–4.5:1
     against white. They satisfy AA for large text (≥ 24px regular /
     18.7px bold) and for non-text UI elements (borders, icon strokes,
     graphical objects — 3:1 threshold under WCAG 1.4.11), but must NOT
     be used for small body copy or button labels on a white background.
   =========================================================================== */

:root {

  /* -------------------------------------------------------------------
     1. COLOUR — Primary (Navy)
     Brand anchor. Used for headings, dark sections, primary surfaces.
     ------------------------------------------------------------------- */
  --color-primary-900: #0e1c42; /* base primary — text-safe on white (13:1+) */
  --color-primary-700: #142a5c; /* gradient companion / hover-dark          */
  --color-primary-500: #1c3568; /* secondary dark surface (navy-soft)       */

  /* -------------------------------------------------------------------
     2. COLOUR — Secondary (Slate-Blue)
     A muted, distinct-from-primary hue for secondary UI: secondary
     buttons, secondary badges, subtle structural accents.
     ------------------------------------------------------------------- */
  --color-secondary-700: #33456e; /* text-safe on white (~9:1) */
  --color-secondary-500: #4d6086; /* decorative / large-scale only */
  --color-secondary-100: #eef1f7; /* tint background for secondary chips */

  /* -------------------------------------------------------------------
     3. COLOUR — Accent (Teal)
     The site's single interactive/CTA colour. Split into a darker,
     text-safe variant for anything carrying text (buttons, links) and
     a brighter, decorative variant for fills, glows and large surfaces.
     ------------------------------------------------------------------- */
  --color-accent-600: #0b6e5f; /* text-safe on white (6.2:1) — buttons, links */
  --color-accent-500: #17a892; /* decorative / large-scale only — icons, borders, gradients */
  --color-accent-400: #0f8c78; /* mid — hover state for accent-600 elements */
  --color-accent-300: #5fe0c9; /* text-safe on NAVY (10.3:1) — text/icons on dark backgrounds only */
  --color-accent-100: #e5f6f3; /* pale tint — chip backgrounds, icon plates on light bg */

  /* -------------------------------------------------------------------
     4. COLOUR — Semantic (Success / Warning / Error)
     Each has a text-safe "ink" for copy and a pale tint for backgrounds.
     ------------------------------------------------------------------- */
  --color-success-700: #1e6b45; /* text-safe on white (~6.5:1) */
  --color-success-100: #e7f6ec;
  --color-warning-700: #92400e; /* text-safe on white (~6.4:1) */
  --color-warning-100: #fdf1e0;
  --color-error-700:   #b42323; /* text-safe on white (~6.1:1) */
  --color-error-100:   #fbe9e9;

  /* -------------------------------------------------------------------
     5. COLOUR — Neutral greys (9-step scale)
     ------------------------------------------------------------------- */
  --color-neutral-900: #101a33; /* ink — primary body/heading text on white */
  --color-neutral-700: #3b4459; /* secondary text needing more weight than 600 */
  --color-neutral-600: #5b6577; /* default body copy — text-safe on white (~7.3:1) */
  --color-neutral-500: #8791a1; /* muted/help text — decorative-adjacent, min size 16px */
  --color-neutral-300: #c7cdda; /* dividers on light surfaces */
  --color-neutral-200: #e6e9f0; /* default border colour */
  --color-neutral-100: #eef1f8; /* subtle fills, hover backgrounds */
  --color-neutral-50:  #f5f7fb; /* muted page background */
  --color-neutral-0:   #ffffff;

  /* -------------------------------------------------------------------
     6. COLOUR — Background / Surface / Border roles
     Semantic aliases so components reference *purpose*, not a raw hue.
     ------------------------------------------------------------------- */
  --bg-page:        var(--color-neutral-0);
  --bg-muted:        var(--color-neutral-50);
  --bg-dark:         var(--color-primary-900);

  --surface-default: var(--color-neutral-0);
  --surface-dark:    var(--color-primary-500);
  --surface-sunken:  var(--color-neutral-50);

  --border-default:  var(--color-neutral-200);
  --border-strong:   var(--color-neutral-300);
  --border-dark:     rgba(255, 255, 255, 0.14);
  --border-focus:    var(--color-accent-600);

  /* Text roles */
  --text-heading:    var(--color-neutral-900);
  --text-body:        var(--color-neutral-600);
  --text-muted:        var(--color-neutral-500);
  --text-on-dark:      #ffffff;
  --text-on-dark-muted: #b7c0d8;
  --text-link:         var(--color-accent-600);

  /* -------------------------------------------------------------------
     7. TYPOGRAPHY
     ------------------------------------------------------------------- */
  --font-head: "Sora", "Segoe UI", sans-serif;
  --font-body: "Inter", "Segoe UI", sans-serif;

  /* Fluid type scale — clamp(min, preferred, max) so headings scale
     smoothly between mobile and desktop instead of jumping at a
     single breakpoint. */
  --text-display:  clamp(2.75rem, 2.35rem + 1.8vw, 3.75rem);  /* ~44 → 60px */
  --text-h1:       clamp(2rem,   1.72rem + 1.2vw, 2.875rem);  /* ~32 → 46px */
  --text-h2:       clamp(1.5rem, 1.36rem + 0.6vw, 2.125rem);  /* ~24 → 34px */
  --text-h3:       clamp(1.125rem, 1.07rem + 0.24vw, 1.375rem); /* ~18 → 22px */
  --text-h4:       1.0625rem;  /* 17px */
  --text-h5:       1rem;       /* 16px */
  --text-h6:       0.8125rem;  /* 13px, uppercase label style */
  --text-body-lg:  1.0625rem;  /* 17px — lead paragraphs */
  --text-body:     0.9375rem;  /* 15px — default body copy */
  --text-small:    0.8125rem;  /* 13px */
  --text-caption:  0.75rem;    /* 12px — uppercase micro-labels */

  --leading-tight: 1.15;
  --leading-snug:  1.35;
  --leading-normal: 1.6;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold: 600;
  --weight-bold:    700;
  --weight-extrabold: 800;

  --tracking-tight: -0.01em;
  --tracking-wide:  0.08em;
  --tracking-wider: 0.12em;

  /* -------------------------------------------------------------------
     8. SPACING SCALE (4px base unit)
     ------------------------------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* -------------------------------------------------------------------
     9. RADIUS
     ------------------------------------------------------------------- */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-full: 999px;

  /* -------------------------------------------------------------------
     10. SHADOW / ELEVATION
     ------------------------------------------------------------------- */
  --shadow-sm: 0 1px 3px rgba(14, 28, 66, 0.08);
  --shadow-md: 0 4px 24px rgba(14, 28, 66, 0.06);
  --shadow-lg: 0 20px 60px rgba(14, 28, 66, 0.12);
  --shadow-focus: 0 0 0 3px rgba(11, 110, 95, 0.35);

  /* -------------------------------------------------------------------
     11. MOTION
     ------------------------------------------------------------------- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast:  120ms;
  --duration-base:  180ms;
  --duration-slow:  280ms;

  /* -------------------------------------------------------------------
     12. Z-INDEX SCALE
     ------------------------------------------------------------------- */
  --z-nav:      100;
  --z-overlay:  200;
  --z-modal:    300;
  --z-toast:    400;

  /* -------------------------------------------------------------------
     13. LAYOUT
     ------------------------------------------------------------------- */
  --container-max: 1180px;
  --container-pad: 32px;
}

/* Backward-compatible aliases: the legacy component file (style.css)
   was written against these shorter variable names. Rather than
   rewrite every selector in one pass and risk breaking existing pages,
   the old names are mapped onto the new token set. New components
   should reference the token names above directly. */
:root {
  --navy: var(--color-primary-900);
  --navy-2: var(--color-primary-700);
  --navy-soft: var(--color-primary-500);
  --teal: var(--color-accent-600);
  --teal-dark: var(--color-accent-400);
  --teal-light: var(--color-accent-100);
  --ink: var(--text-heading);
  --body: var(--text-body);
  --body-light: var(--text-muted);
  --bg-light: var(--bg-muted);
  --border: var(--border-default);
  --white: var(--color-neutral-0);
  --radius: var(--radius-md);
  --shadow: var(--shadow-md);
}