/* ============================================================
   V18.1 Design Tokens
   Centralised design primitives for the entire UI.
   Pages and components MUST consume these variables instead of
   hard-coded colors/sizes.
============================================================ */
:root {
    /* Color – surfaces */
    --v18-bg:            #0a0c12;
    --v18-bg-elevated:   #0e1119;
    --v18-surface:       #121722;
    --v18-surface-2:     #171d2a;
    --v18-surface-3:     #1c2334;

    /* Color – borders */
    --v18-border:        rgba(255, 255, 255, 0.07);
    --v18-border-strong: rgba(255, 255, 255, 0.14);

    /* Color – text */
    --v18-text:          #f5f7fb;
    --v18-text-2:        #b5bfd3;
    --v18-text-3:        #8593aa;
    --v18-text-muted:    #6b778d;

    /* Color – brand */
    --v18-brand:         #ff4d5e;
    --v18-brand-soft:    rgba(255, 77, 94, 0.18);
    --v18-brand-strong:  #ff6b7a;

    /* Color – semantic */
    --v18-success:       #22c55e;
    --v18-success-soft:  rgba(34, 197, 94, 0.16);
    --v18-warning:       #f59e0b;
    --v18-warning-soft:  rgba(245, 158, 11, 0.16);
    --v18-danger:        #ef4444;
    --v18-danger-soft:   rgba(239, 68, 68, 0.16);
    --v18-info:          #38bdf8;
    --v18-info-soft:     rgba(56, 189, 248, 0.16);
    --v18-muted:         #94a3b8;
    --v18-muted-soft:    rgba(148, 163, 184, 0.14);

    /* Radius */
    --v18-radius-sm: 8px;
    --v18-radius:    14px;
    --v18-radius-lg: 18px;
    --v18-radius-xl: 24px;

    /* Spacing */
    --v18-space-1: 0.35rem;
    --v18-space-2: 0.6rem;
    --v18-space-3: 0.9rem;
    --v18-space-4: 1.25rem;
    --v18-space-5: 1.6rem;
    --v18-space-6: 2rem;

    /* Shadow */
    --v18-shadow-sm: 0 6px 18px rgba(0, 0, 0, 0.25);
    --v18-shadow:    0 14px 36px rgba(0, 0, 0, 0.32);
    --v18-shadow-lg: 0 28px 68px rgba(0, 0, 0, 0.45);

    /* Typography */
    --v18-font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --v18-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

    /* Layers */
    --v18-z-sidebar:   30;
    --v18-z-topbar:    40;
    --v18-z-modal:     1000;
    --v18-z-toast:     1100;
}

/* Legacy bridge – map legacy variables onto V18 tokens so older
   stylesheets stay coherent during the refactor. */
:root {
    --theme-bg-primary:    var(--v18-bg);
    --theme-bg-secondary:  var(--v18-surface);
    --theme-bg-tertiary:   var(--v18-surface-2);
    --theme-text-primary:  var(--v18-text);
    --theme-text-secondary:var(--v18-text-2);
    --theme-text-tertiary: var(--v18-text-3);
    --theme-border:        var(--v18-border);
    --theme-border-light:  var(--v18-border-strong);
    --brand-red:           var(--v18-brand);
    --glass-bg:            rgba(18, 23, 34, 0.86);
    --glass-border:        var(--v18-border);
    --glass-shadow:        var(--v18-shadow);
    --shadow-md:           var(--v18-shadow);
    --shadow-lg:           var(--v18-shadow-lg);
}