/* ==========================================================================
   NSDA design tokens — the single source of every locked value.
   Rules and reasoning: design-system/README.md. Visual reference: design-system/index.html.
   Pages use the JOB names (second block of each group), never raw values.
   ========================================================================== */

:root {
  /* ---------- Colour: palette (14 core) ---------- */
  --house: #0B0A09;      /* brand neutral: the dark. Replaces all black */
  --ash: #1A1A1A;        /* raised dark panel */
  --soft: #5C554D;       /* quiet text on light. 6.6:1 on ivory */
  --muted: #A69E92;      /* quiet text on dark. 7.3:1 on house */
  --stone: #C9C4BC;      /* lines and borders on dark */
  --linen: #E4E2DE;      /* dividers on light */
  --ivory: #F4EFE6;      /* brand neutral: the light. Replaces all white */
  --gold: #D9B872;       /* primary */
  --gold-ink: #8A5A12;   /* primary, deep step: gold text on light */
  --sindoor: #5A1E19;    /* secondary: section ground */
  --peacock: #0B4547;    /* secondary: section ground and linework */
  --marigold: #E8962E;   /* accent: decoration only, never text */
  --vermilion: #C8452F;  /* accent: decoration only, never text */
  --error: #A12B1F;      /* functional: errors only, always with icon + words. Light sections only */

  /* Page grounds: one section each, never reused */
  --ground-garba: #3D0F2E;
  --ground-lessons: #17203A;
  --ground-honors: #2B1830;
  --ground-lamps: #221610;
  --ground-hero-a: #3A1210;
  --ground-hero-b: #2A0D0B;

  /* Overlays */
  --veil-20: rgba(11, 10, 9, 0.2);
  --veil-40: rgba(11, 10, 9, 0.4);
  --veil-55: rgba(11, 10, 9, 0.55);
  --veil-75: rgba(11, 10, 9, 0.75);
  --veil-85: rgba(11, 10, 9, 0.85);
  --ivory-40: rgba(244, 239, 230, 0.4);
  --ivory-85: rgba(244, 239, 230, 0.85);
  --ivory-92: rgba(244, 239, 230, 0.92);
  --gold-ink-40: rgba(138, 90, 18, 0.4);

  /* Colour: jobs */
  --surface-light: var(--ivory);
  --surface-dark: var(--house);
  --surface-raised-dark: var(--ash);
  --text-on-light: var(--house);
  --text-on-dark: var(--ivory);
  --text-quiet-on-light: var(--soft);
  --text-quiet-on-dark: var(--muted);
  --line-on-light: var(--linen);
  --line-on-dark: var(--stone);
  --caption-on-light: var(--soft);
  --caption-on-dark: var(--muted);

  /* ---------- Focus and fields ---------- */
  --focus-ring: 0 0 0 2px var(--ivory), 0 0 0 4px var(--house);   /* links, buttons, menu items */
  --field-line: var(--soft);          /* resting: 1px */
  --field-line-active: var(--house);  /* hover 1px, focus 2px. No glow, label stays House */
  --field-fill: var(--ivory);
  --field-fill-disabled: var(--linen);
  --field-valid: var(--gold-ink);     /* the tick */

  /* ---------- Type ---------- */
  --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --sans: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;

  /* desktop values; tablet and phone below */
  --display-size: 168px;  --display-line: 160px;
  --h1-size: 84px;  --h1-line: 84px;
  --h2-size: 64px;  --h2-line: 64px;
  --h3-size: 44px;  --h3-line: 48px;
  --h4-size: 32px;  --h4-line: 36px;
  --h5-size: 22px;  --h5-line: 28px;
  --h6-size: 14px;  --h6-line: 20px;   /* H6 is the eyebrow */
  --lead-size: 21px;  --lead-line: 32px;
  --body-size: 18px;  --body-line: 28px;
  --small-size: 15px; --small-line: 22px;   /* also captions */

  /* ---------- Space: 4px grid, 17 steps ---------- */
  --space-4: 4px;   --space-8: 8px;   --space-12: 12px;  --space-16: 16px;
  --space-20: 20px; --space-24: 24px; --space-32: 32px;  --space-40: 40px;
  --space-48: 48px; --space-56: 56px; --space-64: 64px;  --space-80: 80px;
  --space-96: 96px; --space-120: 120px; --space-144: 144px; --space-160: 160px; --space-200: 200px;

  /* Space: jobs (desktop; tablet and phone below) */
  --gutter: 40px;               /* page margin */
  --section-pad: 160px;         /* section top and bottom */
  --section-pad-set: 200px;     /* set-piece sections */
  --content-gap: 120px;         /* between pieces of content in a section */
  --content-gap-lg: 160px;
  --content-gap-set: 200px;     /* inside set pieces */
  --column-gap: 96px;
  --heading-gap: 24px;          /* heading to the copy under it */
  --hero-bottom: 80px;          /* hero text above the bottom edge */
  --target: 44px;               /* smallest tappable size */

  /* ---------- Layout widths ---------- */
  --w-wide: 1280px;
  --w-content: 1120px;
  --w-reading: 720px;
  --w-narrow: 560px;
  --w-hero-line: 500px;

  /* ---------- Corners ---------- */
  --r-pill: 999px;
  --r-photo: 14px;
  --r-control: 12px;
  --r-small: 8px;

  /* ---------- Motion ---------- */
  --t-quick: 200ms;     /* hover colour, underline */
  --t-short: 300ms;     /* small moves, ticks */
  --t-medium: 500ms;    /* panels, menus */
  --t-long: 700ms;      /* scroll reveals */
  --t-ambient: 1800ms;  /* slow loops */
  --ease-glide: cubic-bezier(0.22, 1, 0.36, 1);   /* arriving */
  --ease-sway: cubic-bezier(0.65, 0, 0.35, 1);    /* between two states */
  --ease-standard: ease;                          /* colour and fades */
  --ease-steady: linear;                          /* loops and progress only */
}

/* Tablet: 768–1199px */
@media (max-width: 1199px) {
  :root {
    --display-size: 96px;  --display-line: 96px;
    --h1-size: 60px;  --h1-line: 60px;
    --h2-size: 48px;  --h2-line: 52px;
    --h3-size: 36px;  --h3-line: 40px;
    --h4-size: 28px;  --h4-line: 32px;
    --h5-size: 20px;  --h5-line: 28px;
    --h6-size: 13px;  --h6-line: 20px;
    --lead-size: 19px;  --lead-line: 28px;
    --body-size: 17px;  --body-line: 28px;

    --section-pad: 120px;
    --section-pad-set: 144px;
    --content-gap: 96px;
    --content-gap-lg: 120px;
    --content-gap-set: 120px;
    --column-gap: 64px;
  }
}

/* Phone: up to 767px */
@media (max-width: 767px) {
  :root {
    --display-size: 48px;  --display-line: 48px;
    --h1-size: 36px;  --h1-line: 40px;
    --h2-size: 30px;  --h2-line: 36px;
    --h3-size: 26px;  --h3-line: 32px;
    --h4-size: 22px;  --h4-line: 28px;
    --h5-size: 18px;  --h5-line: 24px;
    --h6-size: 13px;  --h6-line: 18px;
    --lead-size: 17px;  --lead-line: 26px;
    --body-size: 16px;  --body-line: 26px;

    --gutter: 20px;
    --section-pad: 96px;
    --section-pad-set: 96px;
    --content-gap: 64px;
    --content-gap-lg: 96px;
    --content-gap-set: 96px;
    --heading-gap: 20px;
  }
}

/* Reduced motion: nothing slides, scales or loops; fades 150ms or less */
@media (prefers-reduced-motion: reduce) {
  :root {
    --t-short: 150ms; --t-medium: 150ms; --t-long: 150ms; --t-ambient: 0ms;
  }
}