/**
 * Verion Design Tokens
 * Themes and extensions MUST consume these tokens for global visual consistency.
 */
:root {
    /* —— Color Tokens (themes override; legacy aliases kept) —— */
    --cos-color-ink: #111827;
    --cos-color-brand: #0F766E;
    --cos-color-accent: #14B8A6;
    --cos-color-gold: #C9A227;
    --cos-color-gold-bright: #E8D48B;
    --cos-color-gold-deep: #8B6914;
    --cos-color-surface: #FFFFFF;
    --cos-color-surface-2: #F8FAF9;
    --cos-color-border: rgba(15, 118, 110, 0.14);
    --cos-color-muted: #6B7280;
    --cos-color-inverse: #FFFFFF;

    --cos-ink: var(--cos-color-ink);
    --cos-jade: var(--cos-color-brand);
    --cos-accent: var(--cos-color-accent);
    --cos-surface: var(--cos-color-surface);
    --cos-surface-2: var(--cos-color-surface-2);
    --cos-border: var(--cos-color-border);

    /* —— Typography Tokens —— */
    --cos-type-display: var(--cos-font-display, "Segoe UI", system-ui, sans-serif);
    --cos-type-body: var(--cos-font-body, "Segoe UI", system-ui, sans-serif);
    --cos-type-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --cos-type-xs: 0.75rem;
    --cos-type-sm: 0.875rem;
    --cos-type-md: 1rem;
    --cos-type-lg: 1.125rem;
    --cos-type-xl: 1.5rem;
    --cos-type-2xl: 2rem;
    --cos-type-weight-regular: 400;
    --cos-type-weight-medium: 500;
    --cos-type-weight-bold: 700;
    --cos-type-leading-tight: 1.25;
    --cos-type-leading-normal: 1.5;
    --cos-type-leading-loose: 1.75;

    /* —— Elevation Tokens —— */
    --cos-elevation-0: 0;
    --cos-elevation-1: 10;
    --cos-elevation-2: 100;
    --cos-elevation-3: 200;
    --cos-elevation-4: 1050;
    --cos-elevation-5: 1100;

    /* —— Radius Tokens —— */
    --cos-radius-none: 0;
    --cos-radius-sm: 0.375rem;
    --cos-radius-md: 0.75rem;
    --cos-radius-lg: 1rem;
    --cos-radius-xl: 1.25rem;
    --cos-radius-pill: 999px;

    /* —— Spacing Tokens —— */
    --cos-space-0: 0;
    --cos-space-1: 0.25rem;
    --cos-space-2: 0.5rem;
    --cos-space-3: 0.75rem;
    --cos-space-4: 1rem;
    --cos-space-5: 1.5rem;
    --cos-space-6: 2rem;
    --cos-space-8: 3rem;
    --cos-space-10: 4rem;

    /* —— Motion Tokens —— */
    --cos-motion-instant: 0ms;
    --cos-motion-fast: 120ms;
    --cos-motion-base: 200ms;
    --cos-motion-slow: 360ms;
    --cos-motion-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
    --cos-motion-ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
    --cos-motion-panel: transform var(--cos-motion-base) var(--cos-motion-ease), opacity var(--cos-motion-fast) var(--cos-motion-ease);

    /* —— Shadow Tokens —— */
    --cos-shadow-none: none;
    --cos-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
    --cos-shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08);
    --cos-shadow-lg: 0 18px 48px rgba(15, 23, 42, 0.14);
    --cos-shadow-focus: 0 0 0 3px color-mix(in srgb, var(--cos-color-brand) 28%, transparent);
    --cos-shadow-focus-gold: 0 0 0 3px color-mix(in srgb, var(--cos-color-gold) 38%, transparent);

    /* —— Button Tokens (Verion surfaces consume these) —— */
    --cos-btn-radius: var(--cos-radius-pill);
    --cos-btn-fg-on-gold: #1a1406;
    --cos-btn-fg-on-teal: #f4fffc;
    --cos-btn-gold-glow: 0 12px 28px rgba(139, 105, 20, 0.28);
    --cos-btn-gold-glow-hover: 0 16px 36px rgba(139, 105, 20, 0.4);
    --cos-btn-teal-glow: 0 12px 28px rgba(15, 118, 110, 0.26);
    --cos-btn-press: scale(0.985);
    --cos-btn-lift: translateY(-2px);
    --cos-btn-duration: var(--cos-motion-base);
    --cos-surface-sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.42));
    --cos-hairline-gold: linear-gradient(90deg, var(--cos-color-gold), var(--cos-color-accent));

    /* —— Icon Tokens —— */
    --cos-icon-xs: 0.75rem;
    --cos-icon-sm: 1rem;
    --cos-icon-md: 1.25rem;
    --cos-icon-lg: 1.5rem;
    --cos-icon-xl: 2rem;
    --cos-icon-stroke: 1.5;

    /* —— Chart Tokens —— */
    --cos-chart-1: #0F766E;
    --cos-chart-2: #2563EB;
    --cos-chart-3: #DB2777;
    --cos-chart-4: #CA8A04;
    --cos-chart-5: #7C3AED;
    --cos-chart-6: #0891B2;
    --cos-chart-grid: rgba(15, 23, 42, 0.08);
    --cos-chart-axis: #6B7280;

    /* —— Status Tokens —— */
    --cos-status-success: #15803D;
    --cos-status-success-soft: #DCFCE7;
    --cos-status-warning: #B45309;
    --cos-status-warning-soft: #FEF3C7;
    --cos-status-danger: #B91C1C;
    --cos-status-danger-soft: #FEE2E2;
    --cos-status-info: #1D4ED8;
    --cos-status-info-soft: #DBEAFE;
    --cos-status-neutral: #475569;
    --cos-status-neutral-soft: #F1F5F9;
}

/* Utility helpers that consume tokens */
.cos-token-surface {
    background: var(--cos-color-surface);
    color: var(--cos-color-ink);
    border: 1px solid var(--cos-color-border);
    border-radius: var(--cos-radius-lg);
    box-shadow: var(--cos-shadow-sm);
}

.cos-token-panel {
    background: var(--cos-color-surface-2);
    border-radius: var(--cos-radius-xl);
    padding: var(--cos-space-5);
    box-shadow: var(--cos-shadow-md);
    transition: var(--cos-motion-panel);
}

.cos-token-status-success { color: var(--cos-status-success); background: var(--cos-status-success-soft); }
.cos-token-status-warning { color: var(--cos-status-warning); background: var(--cos-status-warning-soft); }
.cos-token-status-danger { color: var(--cos-status-danger); background: var(--cos-status-danger-soft); }
.cos-token-status-info { color: var(--cos-status-info); background: var(--cos-status-info-soft); }
.cos-token-status-neutral { color: var(--cos-status-neutral); background: var(--cos-status-neutral-soft); }

.cos-icon-sm { width: var(--cos-icon-sm); height: var(--cos-icon-sm); font-size: var(--cos-icon-sm); }
.cos-icon-md { width: var(--cos-icon-md); height: var(--cos-icon-md); font-size: var(--cos-icon-md); }
.cos-icon-lg { width: var(--cos-icon-lg); height: var(--cos-icon-lg); font-size: var(--cos-icon-lg); }