/* ============================================================
   helpme — Design Tokens
   Material Design 3 — Token System
   Responsive: M3 breakpoints
   • Expanded  ≥ 905px
   • Medium    600px – 904px
   • Compact   < 600px
   ============================================================ */

/* Expanded (default) */
:root {
    /* ── Color Tokens (M3 sys) ─────────────────────────────── */
    /* Primary */
    --md-sys-color-primary:           #0077FF;
    --md-sys-color-primary-dark:      #0055CC;
    --md-sys-color-primary-container: #E8F1FF;

    /* Secondary */
    --md-sys-color-secondary:           #FF7700;
    --md-sys-color-secondary-dark:      #E06600;
    --md-sys-color-secondary-container: #FFF0E0;

    /* Background & Surface */
    --md-sys-color-background:            #FFFFFF;
    --md-sys-color-surface-container-low: #F8F9FC;
    --md-sys-color-on-background:         #0F172A;
    --md-sys-color-on-surface-variant:    #64748B;

    /* Outline */
    --md-sys-color-outline-variant: #E2E8F0;
    --md-sys-color-outline:         #CBD5E1;

    /* Inverse (dark footer) */
    --md-sys-color-inverse-surface:     #0F172A;
    --md-sys-color-inverse-surface-dim: #1E293B;
    --md-sys-color-inverse-on-surface:  rgba(255, 255, 255, 0.55);

    /* ── Shape Tokens (M3 sys) ─────────────────────────────── */
    --md-sys-shape-corner-extra-small: 4px;
    --md-sys-shape-corner-small:       8px;
    --md-sys-shape-corner-medium:      12px;
    --md-sys-shape-corner-large:       16px;
    --md-sys-shape-corner-extra-large: 28px;
    --md-sys-shape-corner-full:        9999px;

    /* ── Elevation Tokens (M3 sys) ─────────────────────────── */
    --md-sys-elevation-level1: 0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.05);
    --md-sys-elevation-level2: 0 4px 12px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.05);
    --md-sys-elevation-level3: 0 12px 24px rgba(0,0,0,.09), 0 4px 8px rgba(0,0,0,.05);
    --md-sys-elevation-level4: 0 24px 48px rgba(0,0,0,.10), 0 8px 16px rgba(0,0,0,.06);

    /* ── Layout ────────────────────────────────────────────── */
    --max-width: 67.5rem;  /* 1080px */
    --pad-v:     5rem;
    --pad-h:     24px;

    /* ── Typescale Tokens (M3 sys) ─────────────────────────── */
    --md-sys-typescale-display-large-size:   clamp(2rem, 4vw, 3.25rem);
    --md-sys-typescale-headline-medium-size: clamp(1.75rem, 4vw, 2.5rem);
    --md-sys-typescale-title-large-size:     1.125rem;
    --md-sys-typescale-body-large-size:      1.0625rem;
    --md-sys-typescale-body-medium-size:     0.9375rem;
    --md-sys-typescale-body-small-size:      0.8125rem;
    --md-sys-typescale-label-large-size:     0.875rem;
}

/* Medium: 600–904px */
@media (max-width: 904px) {
    :root {
        --pad-v: 4rem;
        --pad-h: 24px;
    }
}

/* Compact: < 600px */
@media (max-width: 599px) {
    :root {
        --pad-v: 3rem;
        --pad-h: 16px;
    }
}