/* =============================================================================
   PSL — Performance Systems Lab
   Foundational tokens: colour and typography.

   Source of truth: PSL_Design_Consistency_Brief.docx (v1.0, April 2026).
   These values are LOCKED. Do not introduce new colours or type sizes without
   approval. Reference these vars at the class level — never hard-code.
   ============================================================================= */

/* ----------------------------------------------------------------------------
   1. Web fonts — Mona Sans
   Brand sans, supplied by the user as TTF files in /fonts. Mona Sans is the
   active brand typeface; it supersedes the "Inter" reference used in the
   v1.0 design brief (Inter was a placeholder before brand fonts were
   provided). Different weights, same family — never a second typeface.

   Note: only weights actually used in the system are wired up. If you need
   other weights or italics, add additional @font-face blocks pointing into
   /fonts. Width axes (Condensed / SemiCondensed / SemiExpanded / Expanded)
   are NOT wired by default and should not be used on PSL surfaces without
   approval — the brand uses the standard width.
   --------------------------------------------------------------------------- */
@font-face {
  font-family: "Mona Sans";
  src: url("fonts/MonaSans-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Mona Sans";
  src: url("fonts/MonaSans-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Mona Sans";
  src: url("fonts/MonaSans-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Mona Sans";
  src: url("fonts/MonaSans-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Mona Sans";
  src: url("fonts/MonaSans-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ==========================================================================
     COLOURS — the only swatches permitted on PSL surfaces.
     ========================================================================== */

  /* Brand */
  --psl-dark-navy: #1A1A2E;       /* primary dark bg: nav, hero overlay, footer */
  --psl-brand-blue: #2563EB;      /* primary accent: CTA, links, active states */
  --psl-blue-light: #EFF6FF;      /* callout bg, card hover tint */
  --psl-blue-mid: #BFDBFE;        /* muted accent on dark bg, sub-labels */
  --psl-gradient-start: #2563EB;  /* assessment routing card gradient — start */
  --psl-gradient-end:   #7C3AED;  /* assessment routing card gradient — end */

  /* Extended brand — used inside the Rings-of-Success illustrative graphic
     and other illustrative compositional moments. NOT for UI / type / fills. */
  --psl-violet-deep: #3B2DDB;     /* outer ring, deep electric violet */
  --psl-violet: #7C3AED;          /* mid violet (matches gradient-end) */
  --psl-teal: #2EE0B0;            /* green-teal accent inside rings graphic */
  --psl-sky: #3B9BFF;             /* sky-blue accent inside rings graphic */

  /* Emphasis palette — the BRIGHTER set used for heading-keyword emphasis and
     inside the namespaced section modules (teams-domains, individuals-*, etc).
     Intentionally distinct from the UI tokens above: emphasis-violet #8936FF is
     brighter than UI --psl-violet #7C3AED; emphasis-teal #0FB388 is deeper than
     UI --psl-teal #2EE0B0. Do NOT collapse the two sets — they are different
     roles (UI/interactive vs illustrative/emphasis). Documented here so the
     values have a named source of truth. */
  --psl-emph-violet: #8936FF;
  --psl-emph-teal:   #0FB388;
  --psl-emph-blue:   #2563EB;
  /* Canonical heading-emphasis gradient (teal→blue→violet, italic). Single
     source for .hr-h-accent / .m-h-accent / .i-h-accent / module .wc-grad etc. */
  --psl-emph-gradient: linear-gradient(120deg, #0FB388 0%, #2563EB 55%, #8936FF 100%);

  /* Neutral */
  --psl-white: #FFFFFF;
  --psl-off-white: #F9FAFB;       /* alternating section bg */
  --psl-border-grey: #E5E7EB;     /* dividers, card outlines */
  --psl-light-grey: #6B7280;      /* secondary text, captions */
  --psl-mid-grey: #374151;        /* body text on light bg — never pure black */

  /* Semantic aliases — use these in component code wherever possible */
  --bg: var(--psl-white);
  --bg-alt: var(--psl-off-white);
  --bg-dark: var(--psl-dark-navy);
  --fg: var(--psl-mid-grey);              /* body */
  --fg-strong: var(--psl-dark-navy);      /* headings on light bg */
  --fg-muted: var(--psl-light-grey);      /* captions, supporting */
  --fg-on-dark: var(--psl-white);
  --fg-on-dark-muted: var(--psl-light-grey);
  --accent: #2EE0B0;             /* primary CTA / interactive — teal */
  --accent-hover: #1FC79A;
  --accent-on: #0B3F35;           /* fg on teal — deep teal-black */
  --accent-tint: #E5FBF4;
  --accent-blue: var(--psl-brand-blue); /* secondary brand accent (links on body copy) */
  --border: var(--psl-border-grey);

  /* ==========================================================================
     TYPOGRAPHY
     ========================================================================== */

  /* Family */
  --font-sans: "Mona Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: var(--font-sans);  /* same family, different weight */

  /* Weight */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Type scale — DESKTOP (see breakpoints below) */
  --fs-display: 48px;   /* hero headline */
  --fs-h1: 40px;        /* page headline */
  --fs-h2: 32px;        /* section header */
  --fs-h3: 24px;        /* sub-section, in PSL Brand Blue */
  --fs-h4: 20px;        /* card title */
  --fs-body-lg: 18px;
  --fs-body: 16px;
  --fs-body-sm: 14px;
  --fs-label: 12px;     /* all-caps tag/overline */
  --fs-nav: 15px;

  /* Line height */
  --lh-display: 1.15;
  --lh-h1: 1.2;
  --lh-h2: 1.25;
  --lh-h3: 1.3;
  --lh-h4: 1.35;
  --lh-body: 1.7;       /* generous, editorial */
  --lh-body-sm: 1.6;
  --lh-tight: 1;        /* buttons, nav */
  --lh-label: 1.5;

  /* Letter spacing */
  --ls-display: -0.02em;
  --ls-h1: -0.01em;
  --ls-h2: 0;
  --ls-label: 0.08em;   /* all-caps tags */

  /* ==========================================================================
     SPACING — 8px base grid. Use multiples of 8 only.
     ========================================================================== */
  --sp-4xs: 8px;
  --sp-3xs: 16px;
  --sp-2xs: 24px;
  --sp-xs:  32px;
  --sp-sm:  48px;
  --sp-md:  64px;
  --sp-lg:  80px;       /* standard section top/bottom desktop */
  --sp-xl:  96px;       /* hero section top/bottom desktop */
  --sp-2xl: 120px;      /* hero → first content section gap */

  /* ==========================================================================
     LAYOUT
     ========================================================================== */
  --container-max: 1200px;
  --container-pad: 24px;
  --nav-h: 80px;

  /* ==========================================================================
     RADII — only these three.
     ========================================================================== */
  --radius-button: 8px;
  --radius-card: 12px;
  --radius-card-hero: 16px;   /* assessment routing / dark gradient cards */

  /* ==========================================================================
     ELEVATION
     ========================================================================== */
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.12);
  --shadow-nav-scroll: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-cta-hover: 0 4px 12px rgba(37, 99, 235, 0.3);

  /* ==========================================================================
     MOTION — 0.2s ease, default. Never linear for UI.
     ========================================================================== */
  --t-fast: 0.2s ease;
  --t-accordion: 0.25s ease;
}

/* ============================================================================
   Breakpoint type-scale overrides
   ============================================================================ */
@media (max-width: 1023px) {
  :root {
    --fs-display: 36px;
    --fs-h1: 32px;
    --fs-h2: 26px;
    --fs-h3: 20px;
    --sp-lg: 64px;
    --sp-xl: 72px;
    --container-pad: 32px;
  }
}
@media (max-width: 767px) {
  :root {
    --fs-display: 28px;
    --fs-h1: 26px;
    --fs-h2: 22px;
    --fs-h3: 18px;
    --fs-body-lg: 16px;
    --sp-lg: 48px;
    --sp-xl: 56px;
    --container-pad: 20px;
  }
}

/* ============================================================================
   Semantic resets — apply tokens to actual elements.
   Importing this file gets you sensible defaults for the whole document.
   ============================================================================ */
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--fg-strong);
  margin: 0;
  text-wrap: balance;
}

.psl-display, h1.psl-display {
  font-size: var(--fs-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
}

h1, .psl-h1 {
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1);
}

h2, .psl-h2 {
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
}

h3, .psl-h3 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-h3);
  color: var(--accent);  /* H3 is brand blue */
}

h4, .psl-h4 {
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-h4);
}

p, .psl-body {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  margin: 0;
  color: var(--fg);
}

.psl-body-lg {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
}

.psl-body-sm {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  color: var(--fg-muted);
}

/* All-caps tag / overline used above section headlines */
.psl-label {
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--accent);
}

a {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--t-fast);
}
a:hover { color: var(--accent-hover); }

::selection {
  background: var(--psl-blue-mid);
  color: var(--psl-dark-navy);
}