/* ============================================================
   Sputni Live — Design Token System
   ------------------------------------------------------------
   Single source of truth for the site's visual language. Every
   color, font size, spacing step, radius, shadow, and transition
   used by `styles.css` (and any page-level overrides) is defined
   here as a CSS custom property on `:root`.

   To re-skin the site for a different concept, change the values
   below — nothing else. The token *names* are concept-independent
   (invariant: concept-independence); only the *values* vary with
   the apparent service.

   Load order in HTML: Bootstrap → tokens.css → styles.css
   (styles.css consumes these tokens; tokens.css must come before
   any rule that references a --token, but after Bootstrap so site
   tokens win where intended).
   ============================================================ */

:root {
    /* ---- Brand palette --------------------------------------
       Primary is the brand blue; secondary is the page backdrop.
       Success/danger/warning/info mirror Bootstrap's semantic
       ramp so component classes stay consistent. */
    --color-primary:    #003380;
    --color-primary-rgb: 0, 51, 128;
    --color-secondary:  #ececec;
    --color-success:    #198754;
    --color-danger:     #dc3545;
    --color-warning:    #ffc107;
    --color-info:       #0dcaf0;
    --color-text:       #212529;
    --color-text-muted: #6c757d;
    --color-surface:    #ffffff;
    --color-border:     #dee2e6;

    /* ---- Typography ----------------------------------------- */
    --font-base: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-heading: var(--font-base);
    --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* Fluid type scale — clamps so mobile-first scales up gracefully */
    --fs-sm:  clamp(0.8rem,  0.4vw + 0.6rem, 0.9rem);
    --fs-base: clamp(0.95rem, 0.5vw + 0.8rem, 1rem);
    --fs-lg:  clamp(1.2rem,  0.6vw + 1.0rem, 1.4rem);
    --fs-xl:  clamp(1.8rem,  1.0vw + 1.2rem, 2.2rem);
    --fs-xxl: clamp(2.5rem,  1.5vw + 1.5rem, 3rem);

    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;

    --lh-tight: 1.2;
    --lh-base: 1.6;

    /* ---- Spacing scale (4px base) --------------------------- */
    --sp-xs: 0.25rem;
    --sp-sm: 0.5rem;
    --sp-md: 1rem;
    --sp-lg: 1.5rem;
    --sp-xl: 2rem;
    --sp-2xl: 3rem;

    /* ---- Border radius -------------------------------------- */
    --radius-sm: 0.4rem;
    --radius-md: 0.6rem;
    --radius-lg: 0.75rem;
    --radius-pill: 50rem;

    /* ---- Elevation (shadows) -------------------------------- */
    --shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    --shadow-md: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);

    /* ---- Motion --------------------------------------------- */
    --transition-fast: 150ms ease-in-out;
    --transition-base: 250ms ease-in-out;
    --transition-slow: 400ms ease-in-out;

    /* ---- Layout --------------------------------------------- */
    --container-max: 1140px;
    --navbar-height: 64px;
    --z-navbar: 1030;
    --z-modal: 1055;
    --z-toast: 1090;
}