/* GENERATED from src/design/tokens.css by scripts/build-design-tokens-css.mjs — do not edit by hand. */
/**
 * Vivlico Design Tokens — single source of truth for the design system.
 *
 * The `--viv-*` tokens are what components (src/components/*) consume. Colour
 * tokens intentionally fall back to the legacy runtime-theming variables
 * (--primaryColor, --secondaryColor, …) that setColorScheme() in the editor and
 * the landing/registration CSS still set at runtime, so per-club theming keeps
 * working while everything migrates onto the token layer.
 */
:root {
    /* Brand palette (defaults; overridden at runtime by setColorScheme) */
    --viv-color-primary: var(--primaryColor, #82b3f3);
    --viv-color-primary-hover: var(--primaryHoverColor, #6891e0);
    --viv-color-primary-fade: var(--primaryFadeColor, #e8f2fc);
    --viv-color-surface: var(--secondaryColor, #f1f2f6);
    --viv-color-background: var(--backgroundColor1, #ffffff);
    --viv-color-header: var(--headerColor, #1a2744);
    --viv-color-text: var(--writeColor2, var(--writeColor, #5a6578));
    --viv-color-text-muted: var(--writeColor3, #99a0ad);
    --viv-color-danger: #e5484d;
    --viv-color-success: #30a46c;
    --viv-color-warning: var(--v4-warm, #ffb454);

    /* Border / line */
    --viv-color-border: color-mix(in srgb, var(--viv-color-text-muted) 22%, transparent);
    --viv-color-border-strong: color-mix(in srgb, var(--viv-color-text-muted) 40%, transparent);

    /* Spacing scale (4px base) */
    --viv-space-0: 0;
    --viv-space-1: 4px;
    --viv-space-2: 8px;
    --viv-space-3: 12px;
    --viv-space-4: 16px;
    --viv-space-5: 20px;
    --viv-space-6: 24px;
    --viv-space-8: 32px;

    /* Radius */
    --viv-radius-sm: 7px;
    --viv-radius-md: 11px;
    --viv-radius-lg: 18px;
    --viv-radius-pill: 899px;

    /* Elevation */
    --viv-shadow-sm: 0 2px 8px rgba(12, 21, 38, 0.08);
    --viv-shadow-md: 0 11px 36px rgba(0, 0, 0, 0.18);
    --viv-shadow-lg: 0 22px 58px rgba(12, 21, 38, 0.14);

    /* Typography */
    --viv-font-body: var(--textFontFamily, "DM Sans", system-ui, sans-serif);
    --viv-font-display: var(--headerFontFamily, "Outfit", system-ui, sans-serif);
    --viv-font-size-xs: 12px;
    --viv-font-size-sm: 13px;
    --viv-font-size-md: 14px;
    --viv-font-size-lg: 16px;
    --viv-font-weight-medium: 500;
    --viv-font-weight-semibold: 600;
    --viv-font-weight-bold: 700;

    /* Motion */
    --viv-transition-fast: 0.12s ease;
    --viv-transition-base: 0.2s ease;

    /* Z-index layers */
    --viv-z-dropdown: 1000;
    --viv-z-modal-backdrop: 9400;
    --viv-z-modal: 9500;
    --viv-z-toast: 9600;
}