/* =====================================================================
   PUPMC — DESIGN TOKENS
   The one place colours, type, spacing and shapes are defined.
   Linked before main.css on every page, including the admin panel.
   What each token is for: DESIGN.md at the project root.
   ===================================================================== */

/* ---------- Fonts (self-hosted, latin subset, variable weight) ---------- */
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("../fonts/source-sans-3.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("../fonts/source-sans-3-italic.woff2") format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 600 700; font-display: swap;
  src: url("../fonts/source-serif-4.woff2") format("woff2"); }
/* Italic serif: pull quotes and emphasis in headings. */
@font-face { font-family: "Source Serif 4"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("../fonts/source-serif-4-italic.woff2") format("woff2"); }

:root {
  /* Colours live in the colour-system section at the end of this file. */
  color-scheme: light;

  /* ---------- Type ---------- */
  --font-display: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-body: "Source Sans 3", "Segoe UI", system-ui, -apple-system, sans-serif;
  /* Scale (rem = 16px; body text is 17px). */
  --fs-xs: .8rem;      /* 12.8  labels, badges */
  --fs-sm: .9rem;      /* 14.4  meta, captions, footer */
  --fs-base: 1.0625rem;/* 17    body */
  --fs-md: 1.2rem;     /* 19.2  h3, card titles */
  --fs-lead: 1.15rem;  /* 18.4  intro lines, empty-state statements */
  --fs-sub: 1.3rem;    /* 20.8  group headings (committees, home columns) */
  --fs-lg: clamp(1.5rem, 2.6vw, 2rem);        /* h2 */
  --fs-xl: clamp(2.2rem, 4vw, 3.25rem);       /* h1 */
  --fs-display: clamp(2.6rem, 6vw, 4.25rem);  /* home hero */
  --lh-tight: 1.15; --lh-body: 1.6;
  --track-display: -.025em; --track-heading: -.015em;

  /* ---------- Space (4 8 12 16 24 32 48 64 96) ---------- */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-6: 24px; --s-8: 32px; --s-12: 48px; --s-16: 64px; --s-24: 96px;
  --section-y: var(--s-16);
  --gutter: 16px;

  /* ---------- Shape ---------- */
  --r-sm: 4px; --r-md: 4px; --r-lg: 6px; --r-pill: 999px;
  --stripe: 4px;                                  /* green top edge on cards */
  --shadow-sm: none;

  /* ---------- Layout ---------- */
  --container: 1120px;
  --header-h: 64px;
  --measure: 62ch;
  --hit: 44px;                                    /* minimum touch target */

  /* ---------- Motion ---------- */
  --dur-fast: .15s; --dur-slow: .6s;
  --ease-out: cubic-bezier(.2, .7, .2, 1);
}
/* Breakpoints (CSS variables can't be used in media queries, so they are
   written out): 640 small tablet · 720 tablet · 900 two-column · 980 desktop nav. */
@media (max-width: 719px) { :root { --section-y: 40px; --header-h: 60px; } }
@media (min-width: 720px) { :root { --gutter: 24px; } }

/* =====================================================================
   COLOUR SYSTEM (color-system branch)
   Layer 1: raw scales, generated in OKLCH by tools/palette.mjs. Never use
   these in components. Layer 2: semantic roles below. Components use only
   the --color-* roles. How to use: DESIGN.md, "Colour".
   ===================================================================== */
/* @generated-scales:start (node tools/palette.mjs --write) */
:root {
  --green-50: #EDF9ED;
  --green-100: #DAF1DA;
  --green-200: #BAE3BA;
  --green-300: #95CF96;
  --green-400: #6BB86F;
  --green-500: #479F4E;
  --green-600: #2F8437;
  --green-700: #186A23;
  --green-800: #024B10;
  --green-900: #04340B;

  --neutral-0: #FEFFFD;
  --neutral-25: #FCFCF9;
  --neutral-50: #F5F5F2;
  --neutral-100: #E9EAE5;
  --neutral-200: #D5D6D1;
  --neutral-300: #BDBEB8;
  --neutral-400: #A3A49D;
  --neutral-500: #898A84;
  --neutral-600: #70716B;
  --neutral-700: #585953;
  --neutral-800: #3D3E38;
  --neutral-900: #2A2B26;
  --neutral-950: #191A17;

  --success-100: #DFF7EB;
  --success-300: #98DCBE;
  --success-500: #029E72;
  --success-700: #00694A;

  --warning-100: #FEEDDB;
  --warning-300: #EDC291;
  --warning-500: #B77610;
  --warning-700: #7B4C00;

  --error-100: #FFEBE8;
  --error-300: #FBB7AF;
  --error-500: #C8645A;
  --error-700: #8F3831;

  --info-100: #E5F2FF;
  --info-300: #A3CFFD;
  --info-500: #418AD1;
  --info-700: #125A98;

  --board-900: #1E3A26;

  --ink-blue-100: #DDEBFE;
  --ink-blue-300: #A0C0EB;
  --ink-blue-500: #548BD0;
  --ink-blue-700: #1B589E;
}
@supports (color: oklch(0% 0 0)) {
  :root {
    --green-50: oklch(97.0% 0.020 145);
    --green-100: oklch(93.5% 0.040 145);
    --green-200: oklch(87.5% 0.070 145);
    --green-300: oklch(80.0% 0.100 145);
    --green-400: oklch(71.5% 0.130 145);
    --green-500: oklch(63.0% 0.145 145);
    --green-600: oklch(54.5% 0.140 145);
    --green-700: oklch(46.0% 0.130 145);
    --green-800: oklch(36.0% 0.112 145);
    --green-900: oklch(28.5% 0.085 145);

    --neutral-0: oklch(99.8% 0.002 115);
    --neutral-25: oklch(99.0% 0.004 115);
    --neutral-50: oklch(97.0% 0.004 115);
    --neutral-100: oklch(93.5% 0.006 115);
    --neutral-200: oklch(87.5% 0.008 115);
    --neutral-300: oklch(80.0% 0.009 115);
    --neutral-400: oklch(71.5% 0.009 115);
    --neutral-500: oklch(63.0% 0.009 115);
    --neutral-600: oklch(54.5% 0.009 115);
    --neutral-700: oklch(46.0% 0.009 115);
    --neutral-800: oklch(36.0% 0.009 115);
    --neutral-900: oklch(28.5% 0.008 115);
    --neutral-950: oklch(21.5% 0.006 115);

    --success-100: oklch(95.5% 0.030 165);
    --success-300: oklch(84.0% 0.080 165);
    --success-500: oklch(62.0% 0.130 165);
    --success-700: oklch(46.0% 0.097 165);

    --warning-100: oklch(95.5% 0.030 70);
    --warning-300: oklch(84.0% 0.080 70);
    --warning-500: oklch(62.0% 0.130 70);
    --warning-700: oklch(46.0% 0.100 70);

    --error-100: oklch(95.5% 0.022 27);
    --error-300: oklch(84.0% 0.080 27);
    --error-500: oklch(62.0% 0.130 27);
    --error-700: oklch(46.0% 0.120 27);

    --info-100: oklch(95.5% 0.022 250);
    --info-300: oklch(84.0% 0.080 250);
    --info-500: oklch(62.0% 0.130 250);
    --info-700: oklch(46.0% 0.120 250);

    --board-900: oklch(32.0% 0.050 152);

    --ink-blue-100: oklch(93.5% 0.030 255);
    --ink-blue-300: oklch(80.0% 0.070 255);
    --ink-blue-500: oklch(63.0% 0.120 255);
    --ink-blue-700: oklch(46.0% 0.130 255);
  }
}
/* @generated-scales:end */

:root {
  /* Page and surfaces (the 60%: warm neutrals) */
  --color-bg: var(--neutral-25);              /* page */
  --color-bg-alt: var(--neutral-50);          /* quiet sections */
  --color-surface: var(--neutral-0);          /* cards, inputs */
  --color-surface-raised: var(--neutral-0);   /* menus, dialogs (with --shadow-raised) */
  --color-text: var(--neutral-950);
  --color-text-muted: var(--neutral-700);
  --color-border: var(--neutral-200);         /* hairlines, card edges */
  --color-border-strong: var(--neutral-500);  /* inputs, chips: 3:1 on surfaces */

  /* Brand (the 30%: green) */
  --color-heading: var(--green-800);
  --color-primary: var(--green-800);          /* header, footer, primary buttons, card stripes */
  --color-primary-hover: var(--green-900);    /* one step darker */
  --color-primary-active: var(--green-900);
  --color-on-primary: var(--neutral-0);
  --color-on-primary-muted: var(--green-100);
  --color-on-primary-line: color-mix(in oklch, var(--neutral-0) 45%, transparent);
  --color-on-primary-rule: color-mix(in oklch, var(--neutral-0) 20%, transparent);
  --color-on-primary-hover: color-mix(in oklch, var(--neutral-0) 12%, transparent);

  /* Highlights (the 10%: lighter greens; never text on light backgrounds) */
  --color-highlight: var(--green-300);        /* current-page pill, active markers, underlines */
  --color-on-highlight: var(--green-900);
  --color-highlight-soft: var(--green-50);    /* callout / pinned background */
  --color-highlight-line: var(--green-600);   /* callout edge, "new" marker */
  --color-selection: var(--green-200);

  /* Links and focus */
  --color-link: var(--green-700);             /* always underlined, so it never relies on colour */
  --color-link-hover: var(--green-800);
  --color-focus-ring: var(--green-600);       /* 4.3:1 on paper */
  --color-focus-ring-on-dark: var(--neutral-0);

  /* Badges */
  --color-badge-bg: var(--neutral-50);        --color-badge-text: var(--neutral-800);   --color-badge-border: var(--neutral-400);
  --color-badge-brand-bg: var(--green-50);    --color-badge-brand-text: var(--green-800); --color-badge-brand-border: var(--green-600);
  --color-badge-strong-bg: var(--green-800);  --color-badge-strong-text: var(--neutral-0);
  --color-badge-new-bg: var(--green-300);     --color-badge-new-text: var(--green-900);

  /* Status (same lightness and chroma; always with an icon or word) */
  --color-success: var(--success-700);  --color-success-soft: var(--success-100);  --color-success-line: var(--success-300);
  --color-warning: var(--warning-700);  --color-warning-soft: var(--warning-100);  --color-warning-line: var(--warning-300);
  --color-error: var(--error-700);      --color-error-soft: var(--error-100);      --color-error-line: var(--error-300);
  --color-info: var(--info-700);        --color-info-soft: var(--info-100);        --color-info-line: var(--info-300);

  /* The chalkboard (home hero, 404): the same in every context */
  --color-board: var(--board-900);
  --color-on-board: var(--neutral-50);
  --color-on-board-muted: var(--green-200);
  --color-board-grid: color-mix(in oklch, var(--neutral-50) 6%, transparent);
  --color-board-grid-major: color-mix(in oklch, var(--neutral-50) 11%, transparent);

  /* Graph paper behind missing photos, photo wash, shadows */
  --color-paper-grid: color-mix(in oklch, var(--green-800) 8%, transparent);
  --color-photo-wash: color-mix(in oklch, var(--green-900) 10%, transparent); /* over hero/section photos */
  --shadow-raised: 0 8px 24px color-mix(in oklch, var(--neutral-950) 12%, transparent);
  --shadow-header: 0 8px 18px color-mix(in oklch, var(--neutral-950) 18%, transparent);
  --color-scrim: color-mix(in oklch, var(--neutral-950) 60%, transparent);
}