/* Vistun design tokens — palette + semantic (dark default, light optional) */
/* Layer 1 — palette: never use directly in components, always go through semantic */

:root {
    /* Grays */
    --gray-1000: #0A0C14;
    --gray-950:  #12141C;
    --gray-900:  #1A1D28;
    --gray-800:  #20233A;
    --gray-700:  #363A4A;
    --gray-500:  #6B7088;
    --gray-400:  #8A8FA8;
    --gray-300:  #B0B4C5;
    --gray-200:  #D4D7E0;
    --gray-100:  #E8EAF0;
    --gray-50:   #F0F2F5;
    --gray-25:   #FAFBFC;

    /* Teal */
    --teal-300: #67E8F9;
    --teal-400: #22D3EE;
    --teal-500: #06B6D4;
    --teal-600: #0891B2;
    --teal-700: #0E7490;

    /* Violet */
    --violet-300: #D8B4FE;
    --violet-400: #C084FC;
    --violet-500: #A855F7;
    --violet-600: #9333EA;

    /* Status palette */
    --green-400: #34D399;
    --green-600: #059669;
    --amber-400: #FBBF24;
    --amber-600: #D97706;
    --red-400:   #F87171;
    --red-600:   #DC2626;
    --blue-400:  #60A5FA;
    --blue-600:  #2563EB;

    /* Brand (theme-independent — for logo, landing, illustrations) */
    --brand-teal:   #22D3EE;
    --brand-violet: #C084FC;

    /* Typography */
    --font-sans: 'Manrope', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

    --text-display: 48px;
    --text-h1:      32px;
    --text-h2:      24px;
    --text-h3:      18px;
    --text-body:    14px;
    --text-caption: 12px;
    --text-label:   11px;

    --leading-display: 1.1;
    --leading-h1:      1.2;
    --leading-h2:      1.25;
    --leading-h3:      1.35;
    --leading-body:    1.5;
    --leading-caption: 1.4;
    --leading-label:   1.3;

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

    /* Radius */
    --radius-sm:   6px;
    --radius:      12px;
    --radius-lg:   18px;
    --radius-pill: 999px;

    /* Motion */
    --transition: 180ms ease;

    /* Layer 2 — semantic (DARK theme, default) */
    --bg:              var(--gray-950);
    --surface:         var(--gray-900);
    --surface-raised:  var(--gray-800);
    --surface-hover:   rgba(255, 255, 255, 0.04);

    --text-primary:    var(--gray-100);
    --text-secondary:  var(--gray-300);
    --text-muted:      var(--gray-400);
    --text-disabled:   rgba(255, 255, 255, 0.30);
    --text-on-accent:  var(--gray-1000);

    --accent:           var(--teal-400);
    --accent-hover:     var(--teal-300);
    --accent-active:    var(--teal-500);
    --accent-secondary: var(--violet-400);

    --border:          rgba(255, 255, 255, 0.07);
    --border-strong:   rgba(255, 255, 255, 0.14);
    --border-focus:    var(--teal-400);
    --border-disabled: rgba(255, 255, 255, 0.04);
    --focus-ring:      rgba(34, 211, 238, 0.40);

    --success: var(--green-400);
    --warning: var(--amber-400);
    --danger:  var(--red-400);
    --info:    var(--blue-400);

    --success-dim: rgba(52, 211, 153, 0.10);
    --warning-dim: rgba(251, 191, 36, 0.10);
    --danger-dim:  rgba(248, 113, 113, 0.10);
    --info-dim:    rgba(96, 165, 250, 0.10);

    --accent-dim:           rgba(34, 211, 238, 0.10);
    --accent-secondary-dim: rgba(192, 132, 252, 0.10);

    color-scheme: dark;
}

/* Layer 2 — semantic (LIGHT theme) */
[data-theme="light"] {
    --bg:              var(--gray-25);
    --surface:         #FFFFFF;
    --surface-raised:  #FFFFFF;
    --surface-hover:   var(--gray-50);

    --text-primary:    var(--gray-950);
    --text-secondary:  var(--gray-700);
    --text-muted:      var(--gray-500);
    --text-disabled:   rgba(18, 20, 28, 0.30);
    --text-on-accent:  #FFFFFF;

    --accent:           var(--teal-600);
    --accent-hover:     var(--teal-700);
    --accent-active:    var(--teal-700);
    --accent-secondary: var(--violet-600);

    --border:          rgba(18, 20, 28, 0.08);
    --border-strong:   rgba(18, 20, 28, 0.16);
    --border-focus:    var(--teal-500);
    --border-disabled: rgba(18, 20, 28, 0.04);
    --focus-ring:      rgba(8, 145, 178, 0.35);

    --success: var(--green-600);
    --warning: var(--amber-600);
    --danger:  var(--red-600);
    --info:    var(--blue-600);

    --success-dim: rgba(5, 150, 105, 0.10);
    --warning-dim: rgba(217, 119, 6, 0.10);
    --danger-dim:  rgba(220, 38, 38, 0.10);
    --info-dim:    rgba(37, 99, 235, 0.10);

    --accent-dim:           rgba(8, 145, 178, 0.10);
    --accent-secondary-dim: rgba(147, 51, 234, 0.10);

    color-scheme: light;
}

@media (max-width: 768px) {
    :root {
        --text-display: 36px;
        --text-h1:      26px;
    }
}