/* ==========================================================================
   CSS Variables / Design Tokens
   Extended variables beyond what's in style.css :root.
   Used for consistent theming across all components.
   ========================================================================== */

/* ── Typography ── */
/* Nunito @font-face declarations live in main.css (self-hosted, GDPR-compliant) */
:root {
    --font-primary: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ── Button Styles ── */
:root {
    --btn-padding-x: var(--space-6);
    --btn-padding-y: var(--space-3);
    --btn-padding-x-lg: var(--space-8);
    --btn-padding-y-lg: var(--space-4);
    --btn-font-size: var(--font-size-base);
    --btn-font-size-lg: var(--font-size-lg);
    /* --btn-radius is intentionally NOT overridden here; style.css sets it to
       var(--radius-full) for pill-shaped buttons site-wide. */
    --btn-font-weight: 600;
}

/* ── Card Styles ── */
:root {
    --card-padding: var(--space-6);
    --card-radius: var(--radius-card);
    --card-shadow: var(--shadow-md);
    --card-shadow-hover: var(--shadow-lg);
}

/* ── Form Styles ── */
:root {
    --input-padding: var(--space-3) var(--space-4);
    --input-border: 1px solid var(--color-border);
    --input-radius: var(--radius-md);
    --input-font-size: var(--font-size-base);
}