/* ============================================
   ClipSpark Design Tokens
   Single source of truth for all visual values
   ============================================ */

:root {
    /* ── Colors: Background ── */
    --cs-bg:              #06070c;
    --cs-surface:         #10131a;
    --cs-surface-alt:     #161a23;
    --cs-surface-hover:   #1c2030;

    /* ── Colors: Border ── */
    --cs-border:          rgba(148, 163, 184, 0.14);
    --cs-border-strong:   rgba(148, 163, 184, 0.28);

    /* ── Colors: Text ── */
    --cs-text:            #e5e7eb;
    --cs-text-muted:      #94a3b8;
    --cs-text-soft:       #6b7280;
    --cs-text-white:      #ffffff;

    /* ── Colors: Accent ── */
    --cs-accent:          #1f2937;
    --cs-accent-hover:    #273247;
    --cs-brand:           #7B73FF;
    --cs-brand-hover:     #6B63EF;

    /* ── Colors: Status ── */
    --cs-success:         #22c55e;
    --cs-success-bg:      rgba(34, 197, 94, 0.16);
    --cs-success-border:  rgba(34, 197, 94, 0.28);
    --cs-success-text:    #bbf7d0;

    --cs-info:            #60a5fa;
    --cs-info-bg:         rgba(96, 165, 250, 0.16);
    --cs-info-border:     rgba(96, 165, 250, 0.3);
    --cs-info-text:       #dbeafe;

    --cs-warning:         #fbbf24;
    --cs-warning-bg:      rgba(251, 191, 36, 0.18);
    --cs-warning-border:  rgba(251, 191, 36, 0.32);
    --cs-warning-text:    #fcd34d;

    --cs-error:           #f87171;
    --cs-error-bg:        rgba(248, 113, 113, 0.18);
    --cs-error-border:    rgba(248, 113, 113, 0.32);
    --cs-error-text:      #fecaca;

    /* ── Spacing ── */
    --cs-space-1:         0.25rem;   /* 4px  */
    --cs-space-2:         0.5rem;    /* 8px  */
    --cs-space-3:         0.75rem;   /* 12px */
    --cs-space-4:         1rem;      /* 16px */
    --cs-space-5:         1.25rem;   /* 20px */
    --cs-space-6:         1.5rem;    /* 24px */
    --cs-space-8:         2rem;      /* 32px */
    --cs-space-10:        2.5rem;    /* 40px */
    --cs-space-12:        3rem;      /* 48px */
    --cs-space-16:        4rem;      /* 64px */

    /* ── Typography ── */
    --cs-font:            'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --cs-font-mono:       ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

    --cs-text-xs:         0.75rem;   /* 12px */
    --cs-text-sm:         0.875rem;  /* 14px */
    --cs-text-base:       1rem;      /* 16px */
    --cs-text-lg:         1.125rem;  /* 18px */
    --cs-text-xl:         1.25rem;   /* 20px */
    --cs-text-2xl:        1.5rem;    /* 24px */
    --cs-text-3xl:        1.875rem;  /* 30px */

    /* ── Radii ── */
    --cs-radius-sm:       6px;
    --cs-radius:          8px;
    --cs-radius-md:       12px;
    --cs-radius-lg:       16px;
    --cs-radius-full:     9999px;

    /* ── Shadows ── */
    --cs-shadow:          0 20px 44px -34px rgba(2, 6, 23, 0.75);
    --cs-shadow-lg:       0 8px 16px rgba(0, 0, 0, 0.3);

    /* ── Transitions ── */
    --cs-transition:      0.2s ease;
    --cs-transition-slow: 0.3s ease;
}