/*
 * College Nine Senate — Design Tokens
 * Loads AFTER Olivero's base CSS in the sub-theme. Additive only: no resets,
 * no element selectors here. Everything is a custom property on :root.
 *
 * Contrast ratios (WCAG 2.1, computed against the pairings named below):
 *   --color-primary #003c6c on white #ffffff ......... 11.3:1  (AAA)
 *   --color-text    #1a1a1a on --color-bg #ffffff .... 17.4:1  (AAA)
 *   --color-text-muted #4a5568 on white .............. 7.5:1   (AAA)
 *   white #ffffff on --color-primary #003c6c ......... 11.3:1  (AAA) — header, primary button
 *   --color-accent #fdc700 on --color-primary ........ 7.2:1   (AAA) — gold on blue
 *   --color-text #1a1a1a on --color-accent #fdc700 ... 11.1:1  (AAA) — text on gold surfaces
 *   --color-success #1e7d3e on white ................. 5.2:1   (AA)
 *   --color-warn    #8a5a00 on white ................. 5.9:1   (AA)
 *   --color-danger  #b91c1c on white ................. 6.5:1   (AA)
 * NOTE: gold #fdc700 on white is 1.6:1 — never use gold for text on light
 * backgrounds; gold is a surface/accent color paired with dark text.
 */

:root {
  /* ---- Brand primitives ---- */
  --c9-blue: #003c6c;        /* UCSC Blue */
  --c9-blue-dark: #002a4d;   /* hover/active on blue */
  --c9-blue-tint: #e8eef4;   /* light blue surface (table headers, callouts) */
  --c9-gold: #fdc700;        /* UCSC Gold */
  --c9-gold-dark: #e0b000;   /* gold hover */
  --c9-gold-tint: #fff7d6;   /* light gold surface */

  /* ---- Neutrals ---- */
  --c9-white: #ffffff;
  --c9-gray-50: #f7f8fa;
  --c9-gray-100: #eceef1;
  --c9-gray-300: #cbd2d9;
  --c9-gray-500: #4a5568;
  --c9-gray-900: #1a1a1a;

  /* ---- Semantic ---- */
  --color-bg: var(--c9-white);
  --color-surface: var(--c9-gray-50);        /* cards, table stripes */
  --color-surface-brand: var(--c9-blue-tint);
  --color-text: var(--c9-gray-900);
  --color-text-muted: var(--c9-gray-500);
  --color-text-inverse: var(--c9-white);     /* on --color-primary */
  --color-primary: var(--c9-blue);
  --color-primary-hover: var(--c9-blue-dark);
  --color-accent: var(--c9-gold);            /* surfaces/borders only; pair with --color-text */
  --color-border: var(--c9-gray-300);
  --color-link: var(--c9-blue);

  /* Funding statuses (text-on-white AA; each has a matching tint surface) */
  --color-success: #1e7d3e;      /* Awarded */
  --color-success-bg: #e7f4ec;
  --color-warn: #8a5a00;         /* Pending */
  --color-warn-bg: var(--c9-gold-tint);
  --color-danger: #b91c1c;       /* Denied */
  --color-danger-bg: #fdecec;

  /* ---- Type ---- */
  /* Roboto per BRAND.md — it is UCSC's own web family, so brand harmonization
     is exact. Load via Google Fonts <link> (Roboto 400/500/700, Roboto
     Condensed 700, Roboto Mono 400); system stack remains the fallback. */
  --font-sans: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Helvetica Neue", Arial, sans-serif;
  --font-display: "Roboto Condensed", var(--font-sans);
  --font-mono: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --text-sm: 0.875rem;   /* 14px — table meta, captions */
  --text-base: 1rem;     /* 16px — body */
  --text-lg: 1.125rem;   /* 18px — lead paragraphs */
  --text-xl: 1.375rem;   /* 22px — h3 */
  --text-2xl: 1.75rem;   /* 28px — h2 */
  --text-3xl: 2.25rem;   /* 36px — h1 */
  --text-stat: clamp(2.5rem, 6vw, 4rem); /* hero "remaining funds" number */

  --weight-normal: 400;
  --weight-medium: 600;
  --weight-bold: 700;

  --leading-tight: 1.2;   /* headings, stat number */
  --leading-body: 1.6;    /* body copy */

  /* ---- Spacing (4px base) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* ---- Radii / shadows / focus ---- */
  --radius-sm: 4px;   /* buttons, inputs */
  --radius-md: 8px;   /* cards, callouts */
  --shadow-sm: 0 1px 3px rgba(0, 20, 40, 0.12);
  --shadow-md: 0 4px 12px rgba(0, 20, 40, 0.15);

  /* Gold ring on a white offset: visible on blue, white, and gold surfaces */
  --focus-ring: 0 0 0 2px var(--c9-white), 0 0 0 5px var(--c9-blue);

  /* ---- Layout ---- */
  --container-max: 1080px;
  --gutter: var(--space-4);        /* 16px phone */
  --gutter-wide: var(--space-8);   /* 32px ≥768px */
}