/* ==========================================================================
   HALEWOOD DESIGN SYSTEM — TOKENS
   The single source of truth for colour, type, spacing, radius, shadow and
   layout in the Opportunities & Talent Development portal.

   Brand values are taken from halewood.co.za (navy #002d6a / #001a51,
   Roboto Slab headings, Roboto body). Read HALEWOOD_DESIGN_SYSTEM.md before
   changing anything here. Pages must NEVER hard-code these values.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&family=Roboto+Slab:wght@300;600;800&display=swap");

:root {
  /* ---- Brand colour ---------------------------------------------------- */
  --halewood-navy: #002d6a;
  --halewood-navy-deep: #001a51;
  --halewood-gold: #c9a85c;
  --halewood-cream: #f6f4ef;
  --halewood-white: #ffffff;

  /* ---- Semantic colour ------------------------------------------------- */
  --text-primary: #16233b;
  --text-secondary: #5b6577;
  --text-on-navy: #ffffff;
  --text-on-navy-muted: rgba(255, 255, 255, 0.74);
  --border-color: #e1dcd1;
  --border-strong: #c9c3b6;
  --border-on-navy: rgba(255, 255, 255, 0.14);
  --background-primary: var(--halewood-cream);   /* page */
  --background-secondary: var(--halewood-white); /* cards, panels */
  --surface-muted: #faf8f4;                      /* inputs, file rows, quiet panels */
  --surface-selected: #eef2f8;                   /* chosen answer, hovered row */
  --gold-tint: #fbf6e9;                          /* information panel */
  --gold-tint-border: #eadfbf;
  --overlay-navy: rgba(0, 26, 81, 0.94);

  /* ---- Status ----------------------------------------------------------- */
  --status-success: #2e7d32;
  --status-success-tint: #e8f3e8;
  --status-warning: #b7791f;
  --status-warning-tint: #fdf3dd;
  --status-danger: #b3261e;
  --status-danger-tint: #fdf1f0;
  --status-danger-border: #ecc9c6;

  /* ---- Typography ------------------------------------------------------- */
  --font-heading: "Roboto Slab", Georgia, "Times New Roman", serif;
  --font-body: Roboto, "Segoe UI", system-ui, -apple-system, Arial, sans-serif;

  --text-display: clamp(2.125rem, min(1.2rem + 3.4vw, 7.5vh), 3.5rem); /* landing hero only; eases down on short screens */
  --text-h1: 1.75rem;     /* 28 */
  --text-h2: 1.5rem;      /* 24 — card title */
  --text-h3: 1.125rem;    /* 18 — section heading */
  --text-lead: 1.125rem;  /* 18 */
  --text-body: 1rem;      /* 16 */
  --text-small: 0.875rem; /* 14 */
  --text-caption: 0.75rem;/* 12 — kickers, labels in caps */

  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;
  --weight-heading: 800;

  --leading-tight: 1.15;
  --leading-body: 1.6;
  --tracking-caps: 0.22em;   /* kickers / small caps labels */
  --tracking-logo: 0.3em;    /* HALEWOOD wordmark */

  /* ---- Spacing scale (4px base) ---------------------------------------- */
  --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;

  /* ---- Shape ------------------------------------------------------------ */
  --radius-sm: 4px;    /* buttons, inputs, chips */
  --radius-md: 8px;    /* cards, panels, media */
  --radius-pill: 999px;

  --shadow-card: 0 1px 2px rgba(0, 26, 81, 0.05), 0 6px 20px rgba(0, 26, 81, 0.06);
  --shadow-raised: 0 18px 48px rgba(0, 26, 81, 0.22);
  --focus-ring: 0 0 0 3px rgba(201, 168, 92, 0.45);

  /* ---- Controls & layout ------------------------------------------------ */
  --control-height: 48px;
  --header-height: 76px;
  --width-content: 780px;   /* every application stage */
  --width-wide: 1200px;     /* header, landing */
  --width-admin: 1120px;    /* recruitment dashboard */
  --gutter: var(--space-5);

  /* ---- Landing hero ----------------------------------------------------- */
  /* The brand photograph (halewood.co.za home background, 1660x730, never upscaled on a
     normal desktop). Built by archive/make_hero.py from archive/hero-source-*.webp. */
  --hero-image: url("/static/halewood/hero.jpg?v=4");
  /* Fills the hero height, anchored right. Its left edge is faded to --halewood-navy-deep
     inside the file, so the base must stay that flat colour. */
  --hero-image-size: auto 100%;
  /* vh-based so header + hero + pipeline + footer always fit one desktop screen */
  --hero-pad: clamp(24px, 6vh, 64px);
  --hero-card-overhang: clamp(24px, 5vh, 48px);
  --hero-base: var(--halewood-navy-deep);
  /* keeps the heading side navy so text stays legible over the photograph */
  --hero-overlay: linear-gradient(90deg, var(--halewood-navy-deep) 0%, rgba(0, 26, 81, 0.96) 30%, rgba(0, 26, 81, 0.8) 43%, rgba(0, 26, 81, 0.12) 60%, rgba(0, 26, 81, 0) 100%);
  /* tablet/mobile: the copy sits on top of the photograph, so the whole image is veiled */
  --hero-overlay-compact: linear-gradient(180deg, rgba(0, 26, 81, 0.9) 0%, rgba(0, 26, 81, 0.8) 100%);

  /* ---- Breakpoints (reference — CSS cannot read variables in @media) -----
     mobile  : max-width 600px
     tablet  : max-width 960px
     desktop : above 960px
     components.css is the only file allowed to write these media queries. */
}

@media (max-width: 600px) {
  :root {
    --header-height: 64px;
    --gutter: var(--space-4);
    --text-h2: 1.375rem;
  }
}