/*
 * Design tokens — Berkeley Risk and Security Lab
 * Source of truth: Penpot "Design Tokens.json" in /design/
 * Global CSS custom properties. Referenced everywhere.
 *
 * ACCESSIBILITY — color pairing rules (WCAG AA minimum 4.5:1 for body text):
 *
 *   ON LIGHT BACKGROUNDS (white, warm-light, cream):
 *     Text:      --color-blue-dark (#010133)             21:1 ✓
 *                --color-neutral-warm-dark (#56534d)      7.0:1 ✓
 *     Secondary: --color-neutral-warm-darkish (#878279)   5.6:1 ✓ (prefer dark)
 *     Links:     --color-berkeley-blue (#002676)          10.5:1 ✓
 *
 *   ON DARK BACKGROUNDS (blue-dark #010133, page hero, footer):
 *     Text:      --color-white (#ffffff)                  21:1 ✓
 *                --color-neutral-warm-light (#f8f6f3)     ~17:1 ✓
 *     Accent:    --color-blue-light (#9FD1FF)             ~12:1 ✓
 *     NEVER use: --color-neutral-warm-dark/darkish/mid on dark bg
 */

:root {
    /* -----------------------------------------------------------------------
     * Berkeley brand blues
     * --------------------------------------------------------------------- */
    --color-blue-dark:     #010133;
    --color-berkeley-blue: #002676;
    --color-blue-medium:   #004aae;
    --color-blue-bright:   #1a6fd8; /* lighter/brighter medium blue; ~5:1 contrast w/ white */
    --color-blue-light:    #9FD1FF;

    /* -----------------------------------------------------------------------
     * Warm neutrals
     * --------------------------------------------------------------------- */
    --color-neutral-warm-light:   #f8f6f3;
    --color-neutral-warm-medium:  #f7f1e7;
    --color-neutral-warm-mid:     #A19B90;
    --color-neutral-warm-darkish: #878279;
    --color-neutral-warm-dark:       #56534d;
    --color-neutral-warm-dark-hover: #6b6560; /* hover state for warm-dark buttons */

    --color-keyline: var(--color-neutral-warm-mid);

    /* -----------------------------------------------------------------------
     * Berkeley greys
     * --------------------------------------------------------------------- */
    --color-grey-light:  #f2f2f2;
    --color-grey-medium: #808080;

    /* -----------------------------------------------------------------------
     * BRSL brand cream
     * --------------------------------------------------------------------- */
    --color-cream: #f7eede;

    /* Utility */
    --color-white: #ffffff;
    --color-black: #000000;

    /* -----------------------------------------------------------------------
     * Typography
     * --------------------------------------------------------------------- */
    --font-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
    --font-sans:  'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* Type scale */
    --text-xs:             0.75rem;
    --text-sm:             0.875rem;
    --text-base:           1rem;
    --text-medium:             1.125rem;
    --text-lg:             1.25rem;
    --text-xl:             1.5rem;
    --text-2xl:            1.75rem;
    --text-3xl:            1.875rem;
    --text-4xl:            2.25rem;
    --text-5xl:            2.5rem;
    --text-6xl:            3rem;
    --text-7xl:            3.75rem;

    /* Font weights */
    --font-weight-light:     300;
    --font-weight-normal:    400;
    --font-weight-medium:    500;
    --font-weight-semibold:  600;
    --font-weight-bold:      700;
    --font-weight-extrabold: 800;
    --font-weight-black:     900;

    /* Line heights */
    --leading-tight:   1.1;
    --leading-snug:    1.2;
    --leading-normal:  1.4;
    --leading-relaxed: 1.5;
    --leading-loose:   1.6;

    /* Letter spacing */
    --tracking-wide: 0.094em;

    /* Link underline */
    --underline-thickness: 1px;
    --underline-offset: 0.15em;

    /* -----------------------------------------------------------------------
     * Spacing scale
     * --------------------------------------------------------------------- */
    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-5:  1.25rem;
    --space-6:  1.5rem;
    --space-8:  2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    --space-32: 8rem;
    --space-48: 12rem;

    /* -----------------------------------------------------------------------
     * Layout
     * --------------------------------------------------------------------- */
    --max-width-content: 1200px;
    --max-width-text:    72ch;
    --site-padding:      clamp(var(--space-6), 4vw, var(--space-16));
    --section-padding:   clamp(var(--space-10), 5vw, var(--space-16));

    /* Semantic: extra breathing room for visual breaks (figures, pullquotes, separators) */
    --space-block-break: var(--space-8);

    /* Grid — matches Penpot 3-column layout (380px cols, 30px gaps @ 1200px) */
    --grid-columns:      3;
    --grid-gap:          30px;
    --grid-column-width: calc((var(--max-width-content) - (var(--grid-columns) - 1) * var(--grid-gap)) / var(--grid-columns)); /* 380px */

    /* -----------------------------------------------------------------------
     * Borders & radius
     * --------------------------------------------------------------------- */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;

    /* -----------------------------------------------------------------------
     * Transitions
     * --------------------------------------------------------------------- */
    --transition-base: 150ms ease;
    --transition-slow: 300ms ease;
}