/* ── Vitrine CT&I — Design tokens ──────────────────────────
 *
 * Single source of truth for the visual language. Existing CSS files
 * still hard-code the same values; new code must consume tokens.
 * Migration: search-and-replace in a future sprint.
 * ───────────────────────────────────────────────────────── */

:root {
    /* Brand */
    --vt-brand-green:        #21774d;
    --vt-brand-green-dark:   #20764b;
    --vt-brand-green-deep:   #405965;
    --vt-brand-orange:       #f9931b;
    --vt-brand-olive:        #8ead5b;
    --vt-brand-blue:         #327796;

    /* Neutral */
    --vt-bg:                 #ffffff;
    --vt-bg-soft:            #f4f6f8;
    --vt-bg-dark:            #1a3447;
    --vt-text:               #20764b;
    --vt-text-strong:        #405965;
    --vt-text-muted:         #4a5563;
    --vt-text-soft:          #6b7787;
    --vt-border:             #e2e8f0;

    /* Semantic */
    --vt-link:               #21774d;
    --vt-link-hover:         #1a5b3a;
    --vt-success:            #20764b;
    --vt-danger:             #c53030;
    --vt-warning:            #d69e2e;

    /* Spacing scale */
    --vt-space-1:  4px;
    --vt-space-2:  8px;
    --vt-space-3: 12px;
    --vt-space-4: 16px;
    --vt-space-5: 24px;
    --vt-space-6: 32px;
    --vt-space-7: 48px;
    --vt-space-8: 64px;

    /* Radii */
    --vt-radius-sm: 4px;
    --vt-radius-md: 8px;
    --vt-radius-lg: 16px;
    --vt-radius-pill: 999px;

    /* Type */
    --vt-font-system: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --vt-font-display: "Trivia_Gothic_C3_Heavy", "Trivia_Gothic_C2_Bold", var(--vt-font-system);
    --vt-font-body:    "Trivia_Gothic_C2", "Roboto", var(--vt-font-system);

    --vt-fs-xs:    12px;
    --vt-fs-sm:    14px;
    --vt-fs-base:  16px;
    --vt-fs-lg:    18px;
    --vt-fs-xl:    20px;
    --vt-fs-2xl:   24px;
    --vt-fs-3xl:   30px;
    --vt-fs-4xl:   40px;

    /* Shadows */
    --vt-shadow-sm: 0 1px 2px rgba(0, 0, 0, .06);
    --vt-shadow-md: 0 4px 12px rgba(0, 0, 0, .08);
    --vt-shadow-lg: 0 10px 28px rgba(0, 0, 0, .12);

    /* Layout */
    --vt-container-max: 1366px;
    --vt-container-px:  20px;

    /* Motion */
    --vt-transition-fast: 0.15s ease;
    --vt-transition-base: 0.25s ease;
    --vt-transition-slow: 0.4s ease;
}

/* Utility classes built from tokens — small, focused, opt-in */
.vt-container { max-width: var(--vt-container-max); margin: 0 auto; padding: 0 var(--vt-container-px); }
.vt-stack > * + * { margin-top: var(--vt-space-4); }
.vt-row { display: flex; gap: var(--vt-space-3); flex-wrap: wrap; }
.vt-card { background: var(--vt-bg); border-radius: var(--vt-radius-md); box-shadow: var(--vt-shadow-md); padding: var(--vt-space-5); }
.vt-btn  { display: inline-block; padding: var(--vt-space-3) var(--vt-space-5); border-radius: var(--vt-radius-sm); font-weight: 600; text-decoration: none; cursor: pointer; transition: background var(--vt-transition-fast); }
.vt-btn-primary   { background: var(--vt-brand-green); color: var(--vt-bg); border: 0; }
.vt-btn-primary:hover  { background: var(--vt-link-hover); }
.vt-btn-outline   { background: transparent; color: var(--vt-brand-green); border: 2px solid var(--vt-brand-green); }
.vt-btn-outline:hover  { background: var(--vt-brand-green); color: var(--vt-bg); }