/* =============================================================
   vBoxx design tokens — 1:1 mirror of src/index.css (light theme).
   Loaded FIRST in every MiroTalk view so vboxx-meetings.css and
   per-page overrides can reference these custom properties.
   ============================================================= */

:root {
    /* Surfaces */
    --vb-bg:           hsl(210 20% 98%);
    --vb-bg-2:         hsl(214 20% 96%);
    --vb-surface:      hsl(0 0% 100%);
    --vb-surface-2:    hsl(214 15% 95%);
    --vb-surface-3:    hsl(214 20% 92%);
    --vb-surface-input: hsl(214 15% 97%);

    /* Text */
    --vb-fg:           hsl(220 25% 10%);
    --vb-fg-strong:    hsl(220 25% 6%);
    --vb-fg-muted:     hsl(215 16% 47%);
    --vb-fg-subtle:    hsl(215 14% 60%);
    --vb-fg-inverse:   hsl(0 0% 100%);

    /* Brand */
    --vb-primary:        hsl(213 60% 43%);
    --vb-primary-hover:  hsl(213 60% 38%);
    --vb-primary-active: hsl(213 60% 33%);
    --vb-primary-soft:   hsl(213 60% 96%);
    --vb-primary-ring:   hsl(213 60% 43% / 0.25);
    --vb-accent:         hsl(213 60% 96%);
    --vb-accent-fg:      hsl(213 60% 33%);

    /* State */
    --vb-danger:         hsl(0 84% 60%);
    --vb-danger-hover:   hsl(0 84% 53%);
    --vb-danger-soft:    hsl(0 84% 96%);
    --vb-success:        hsl(142 76% 36%);
    --vb-success-soft:   hsl(142 76% 95%);
    --vb-warning:        hsl(38 92% 50%);
    --vb-warning-soft:   hsl(38 92% 95%);

    /* Borders */
    --vb-border:         hsl(214 25% 90%);
    --vb-border-strong:  hsl(214 25% 82%);
    --vb-border-focus:   hsl(213 60% 43%);

    /* Radius */
    --vb-radius-sm: 6px;
    --vb-radius:    10px;
    --vb-radius-lg: 14px;
    --vb-radius-xl: 18px;
    --vb-radius-pill: 999px;

    /* Shadow */
    --vb-shadow-sm: 0 1px 2px hsl(220 25% 10% / 0.04);
    --vb-shadow:    0 2px 4px hsl(220 25% 10% / 0.05), 0 1px 2px hsl(220 25% 10% / 0.04);
    --vb-shadow-md: 0 4px 6px -1px hsl(220 25% 10% / 0.06), 0 2px 4px -2px hsl(220 25% 10% / 0.04);
    --vb-shadow-lg: 0 10px 15px -3px hsl(220 25% 10% / 0.08), 0 4px 6px -4px hsl(220 25% 10% / 0.04);
    --vb-shadow-xl: 0 20px 25px -5px hsl(220 25% 10% / 0.10), 0 8px 10px -6px hsl(220 25% 10% / 0.05);

    /* Typography */
    --vb-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --vb-font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;

    /* Motion */
    --vb-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --vb-duration: 180ms;
}

/* Inter (lokale woff2 — geen Google Fonts).
   Bestanden komen in fonts/inter/. Browser valt netjes terug
   op system-ui zolang ze niet bestaan. */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Inter Regular'), local('Inter-Regular'),
         url('../fonts/inter/Inter-Regular.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: local('Inter Medium'), local('Inter-Medium'),
         url('../fonts/inter/Inter-Medium.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: local('Inter SemiBold'), local('Inter-SemiBold'),
         url('../fonts/inter/Inter-SemiBold.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: local('Inter Bold'), local('Inter-Bold'),
         url('../fonts/inter/Inter-Bold.woff2') format('woff2');
}