/**
 * Design Tokens
 *
 * Single source of truth for colors, spacing, transitions, and layout
 * constants used across the component stylesheet system.
 *
 * Breakpoints are NOT included here — CSS custom properties cannot be
 * used inside @media queries.  See inc/constants.php for PHP mirrors.
 *
 * @package CSRC
 */

:root {
    /* UCLA brand */
    --color-ucla-blue:      #2774AE;
    --color-ucla-gold:      #FFD100;
    --color-ucla-orange:    #F76600;
    --color-ucla-blue-dark: #1e5a8a;

    /* Semantic aliases */
    --color-link:           var(--color-ucla-blue);
    --color-link-hover:     var(--color-link);   /* option (a): no change on hover. Swap to --color-ucla-blue-dark to enable (b). */
    --color-link-visited:   var(--color-link);   /* visited = default (no purple) */
    --color-link-hover-accent: #d4651a;
    --color-accent:         var(--color-ucla-orange);
    --color-orange:         #d4651a;
    --color-orange-hover:   #e67e22;

    /* Focus (keyboard) — consumed by the global baseline in assets/css/focus.css.
       Dark-surface containers re-set --focus-ring-color locally so the ring keeps
       ≥3:1 contrast against their background (WCAG 1.4.11). */
    --focus-ring-width:     2px;
    --focus-ring-offset:    2px;
    --focus-ring-color:     var(--color-ucla-blue);

    /* Text */
    --color-text-primary:   #000;
    --color-text-secondary: #555;
    --color-gray-text:      #6B7280;

    /* Backgrounds & surfaces */
    --color-bg-white:       #fff;
    --color-white:          #ffffff;
    --color-black:          #000000;
    --color-background:     #fefefe;
    --color-border:         #e5e5e5;
    --color-card-bg:        #f8f8f8;

    /* Font families
     * Single source of truth: --font-family-primary is the ONLY place a font
     * stack literal should live. All other font tokens are aliases that point
     * here so they can never drift. Do not reintroduce literal stacks below. */
    --font-family-primary:  'Helvetica', 'Arial', sans-serif;
    --font-primary:         var(--font-family-primary);
    --font-fallback:        var(--font-family-primary);

    /* Typography — Sizes (fluid, rem-based) */
    --text-xs:              var(--wp--preset--font-size--x-small, 0.875rem);
    --text-sm:              var(--wp--preset--font-size--small, clamp(1.125rem, 0.8382rem + 2.9412vw, 1.25rem));
    --text-base:            var(--wp--preset--font-size--base, 1rem);
    --text-md:              var(--wp--preset--font-size--medium, clamp(1.25rem, 0.8382rem + 2.9412vw, 1.5rem));
    --text-h2:              var(--wp--preset--font-size--large, clamp(1.75rem, 0.8382rem + 2.9412vw, 2.25rem));

    /* Typography — Sizes (static, component-scale) */
    --font-size-xs:         0.8125rem;  /* 13px — captions */
    --font-size-sm:         13px;
    --font-size-base:       1rem;       /* 16px — body text */
    --font-size-md:         1.125rem;   /* 18px — subtitles, labels */
    --font-size-lg:         16px;
    --font-size-xl:         17px;
    --font-size-2xl:        2.25rem;    /* 36px — hero/section headings */
    --font-size-3xl:        28px;

    /* Typography — Weights */
    --weight-light:         300;
    --weight-bold:          700;
    --font-weight-normal:   400;
    --font-weight-medium:   500;
    --font-weight-semibold: 600;
    --font-weight-bold:     700;

    /* Typography — Line Heights */
    --line-height-tight:    1.2;
    --line-height-base:     1.5;
    --line-height-relaxed:  1.6;
    --line-height-loose:    2;

    /* Typography — Letter Spacing */
    --letter-spacing-tight: -0.02em;
    --letter-spacing-body:  0.1px;
    --letter-spacing-caps:  1px;
    --tracking-widest:      0.1em;

    /* Layout */
    --container-max-width:  76.5rem;
    --container-gutter:     clamp(1.5rem, 4vw, 2rem);
    --container-width:      min(100% - (2 * var(--container-gutter)), var(--container-max-width));

    /* Spacing */
    --spacing-lg:           40px;
    --space-xs:             0.5rem;
    --space-sm:             1rem;
    --space-md:             1.5rem;
    --space-lg:             2rem;
    --space-xl:             3rem;
    --space-2xl:            4rem;
    --space-3xl:            6rem;
    --space-4xl:            64px;

    /* Header & admin bar */
    --header-height-mobile:      87px;
    --header-height-tablet:      87px;
    --header-height-desktop:     152px;

    /* Border radius */
    --radius-sm:            4px;

    /* Transitions */
    --transition-fast:      0.2s ease;
    --transition-normal:    0.3s ease;
}