/**
 * JP Consortium — Main CSS
 * Design tokens, CSS reset, global base styles.
 *
 * Load order: main.css → layout.css → components.css → page-specific
 */

/* ── Google Fonts ─────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');

/* ── Design Tokens ───────────────────────────────────────────────────────── */
:root {
  /* Colour palette — provisional industrial palette pending official brand */
  --color-navy:         #142B3B;
  --color-navy-dark:    #0D1F2B;
  --color-navy-mid:     #1E3D52;
  --color-amber:        #43d3d1;
  --color-amber-light:  #6ddedd;
  --color-amber-dark:   #2aabaa;
  --color-offwhite:     #F7F6F2;
  --color-graphite:     #30383D;
  --color-gray:         #707981;
  --color-gray-light:   #A8B0B8;
  --color-gray-border:  #D4D8DC;
  --color-white:        #FFFFFF;
  --color-success:      #2D6A4F;
  --color-error:        #9B2335;

  /* Semantic aliases */
  --color-bg:           var(--color-offwhite);
  --color-bg-dark:      var(--color-navy);
  --color-text:         var(--color-graphite);
  --color-text-muted:   var(--color-gray);
  --color-text-inverse: var(--color-white);
  --color-accent:       var(--color-amber);
  --color-border:       var(--color-gray-border);
  --color-focus:        var(--color-amber);

  /* Typography */
  --font-family:        'IBM Plex Sans', system-ui, sans-serif;
  --font-weight-light:  300;
  --font-weight-regular:400;
  --font-weight-medium: 500;
  --font-weight-semi:   600;
  --font-weight-bold:   700;

  /* Type scale (fluid, clamped) */
  --text-xs:    0.75rem;      /* 12px — fine print */
  --text-sm:    0.875rem;     /* 14px — caption / label */
  --text-base:  1rem;         /* 16px — body */
  --text-lg:    1.125rem;     /* 18px — lead text */
  --text-xl:    1.25rem;      /* 20px — card heading */
  --text-2xl:   1.5rem;       /* 24px — h4 / subheading */
  --text-3xl:   clamp(1.5rem,  3vw, 2rem);        /* h3 */
  --text-4xl:   clamp(1.75rem, 3.5vw, 2.5rem);    /* h2 */
  --text-5xl:   clamp(2rem,    5vw,   3.25rem);    /* h1 inner page */
  --text-hero:  clamp(2.25rem, 6vw,   4rem);       /* h1 hero */

  /* Line heights */
  --leading-tight:   1.15;
  --leading-snug:    1.3;
  --leading-normal:  1.6;
  --leading-relaxed: 1.75;

  /* Spacing scale (8px base) */
  --space-1:   0.25rem;   /*  4px */
  --space-2:   0.5rem;    /*  8px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */
  --space-32:  8rem;      /* 128px */

  /* Section vertical padding */
  --section-pad-y:  clamp(var(--space-12), 8vw, var(--space-24));

  /* Content widths */
  --max-width:       1280px;
  --max-width-prose: 72ch;
  --max-width-narrow:56ch;

  /* Borders */
  --radius-sm:  3px;
  --radius-md:  5px;
  --radius-lg:  8px;
  --border-width: 1px;

  /* Shadows */
  --shadow-sm:  0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
  --shadow-md:  0 4px 12px rgba(0,0,0,.10), 0 2px 4px rgba(0,0,0,.06);
  --shadow-lg:  0 12px 32px rgba(0,0,0,.12);

  /* Transitions */
  --transition-fast:   150ms ease;
  --transition-base:   200ms ease;
  --transition-slow:   350ms ease;

  /* Navigation */
  --nav-height:        72px;
  --nav-height-mobile: 64px;
  --nav-bg:            var(--color-navy);
  --nav-text:          rgba(255,255,255,.85);
  --nav-text-hover:    var(--color-white);
  --nav-text-active:   var(--color-amber);
}

/* ── CSS Reset ───────────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-family);
  font-size: var(--text-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, video, svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  outline: none;
}

button {
  cursor: pointer;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: var(--font-weight-semi);
  line-height: var(--leading-snug);
  color: var(--color-navy);
}

p {
  max-width: var(--max-width-prose);
}

/* ── Global typography ───────────────────────────────────────────────────── */
.text-xs     { font-size: var(--text-xs); }
.text-sm     { font-size: var(--text-sm); }
.text-base   { font-size: var(--text-base); }
.text-lg     { font-size: var(--text-lg); }
.text-xl     { font-size: var(--text-xl); }
.text-2xl    { font-size: var(--text-2xl); }
.text-muted  { color: var(--color-text-muted); }
.text-accent { color: var(--color-accent); }
.text-inverse{ color: var(--color-text-inverse); }
.text-center { text-align: center; }
.text-right  { text-align: right; }

.font-light  { font-weight: var(--font-weight-light); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-semi   { font-weight: var(--font-weight-semi); }
.font-bold   { font-weight: var(--font-weight-bold); }

/* ── Prose width constraint ──────────────────────────────────────────────── */
.prose     { max-width: var(--max-width-prose); }
.prose-lg  { font-size: var(--text-lg); line-height: var(--leading-relaxed); }

/* ── Visibility utilities ────────────────────────────────────────────────── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border-width: 0;
}

/* ── Focus ring ──────────────────────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}

/* ── Skip link ───────────────────────────────────────────────────────────── */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  z-index: 9999;
  padding: var(--space-2) var(--space-6);
  background: var(--color-amber);
  color: var(--color-navy);
  font-weight: var(--font-weight-semi);
  font-size: var(--text-sm);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  transition: top var(--transition-fast);
}

.skip-link:focus {
  top: 0;
}

/* ── Section label (small uppercase category label above headings) ─────── */
.section-label {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semi);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-amber);
  margin-bottom: var(--space-3);
}

.section-label--inverse {
  color: var(--color-amber-light);
}

/* ── Section heading block ───────────────────────────────────────────────── */
.section-heading {
  font-size: var(--text-4xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-tight);
  color: var(--color-navy);
}

.section-heading--inverse {
  color: var(--color-white);
}

.section-intro {
  margin-top: var(--space-4);
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  max-width: 64ch;
  line-height: var(--leading-relaxed);
}

.section-intro--inverse {
  color: rgba(255,255,255,.75);
}

/* ── Divider ─────────────────────────────────────────────────────────────── */
.divider {
  display: block;
  width: 48px;
  height: 3px;
  background: var(--color-amber);
  margin-top: var(--space-4);
  border: none;
}

/* ── Background variants ─────────────────────────────────────────────────── */
.bg-white   { background-color: var(--color-white); }
.bg-light   { background-color: var(--color-offwhite); }
.bg-dark    { background-color: var(--color-navy); }
.bg-graphite{ background-color: var(--color-graphite); }

/* ── Reduced-motion ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html {
    scroll-behavior: auto;
  }
}