/* ============================================================
   BackupSphere Design Tokens
   Shared variables for both Customer and Admin portals
   ============================================================ */

:root {
    /* ── Brand palette ── */
    --bs-brand-cyan: #00E5FF;
    --bs-brand-blue: #0088FF;
    --bs-brand-deep: #0055DD;
    --bs-brand-gradient: linear-gradient(135deg, var(--bs-brand-cyan), var(--bs-brand-blue));

    /* ── Neutral (Slate) palette ── */
    --slate-50:  #f8fafc;
    --slate-100: #f1f5f9;
    --slate-200: #e2e8f0;
    --slate-300: #cbd5e1;
    --slate-400: #94a3b8;
    --slate-500: #64748b;
    --slate-600: #475569;
    --slate-700: #334155;
    --slate-800: #1e293b;
    --slate-900: #0f172a;
    --slate-950: #020617;

    /* ── Cloud provider colors ── */
    --color-azure:  #0078d4;
    --color-aws:    #FF9900;

    /* ── Semantic colors ── */
    --color-success:    #22c55e;
    --color-warning:    #f59e0b;
    --color-danger:     #ef4444;
    --color-info:       #3b82f6;

    /* ── Semantic soft ── */
    --color-success-soft: rgba(34, 197, 94, 0.12);
    --color-warning-soft: rgba(245, 158, 11, 0.12);
    --color-danger-soft:  rgba(239, 68, 68, 0.12);
    --color-info-soft:    rgba(59, 130, 246, 0.12);

    /* ── Surface / Background (Light mode) ── */
    --surface-page:   var(--slate-100);
    --surface-card:   #ffffff;
    --surface-raised: #ffffff;
    --surface-inset:  var(--slate-50);
    --surface-hover:  var(--slate-50);
    --surface-overlay: rgba(15, 23, 42, 0.04);

    /* ── Text (Light mode) ── */
    --text-primary:   var(--slate-900);
    --text-secondary: var(--slate-600);
    --text-muted:     var(--slate-400);
    --text-inverse:   #ffffff;
    --text-link:      var(--bs-brand-blue);

    /* ── Border (Light mode) ── */
    --border-default: var(--slate-200);
    --border-subtle:  rgba(148, 163, 184, 0.25);
    --border-strong:  var(--slate-300);

    /* ── Radius scale ── */
    --radius-xs:   4px;
    --radius-sm:   8px;
    --radius-md:   12px;
    --radius-lg:   16px;
    --radius-xl:   24px;
    --radius-pill:  10px;
    --radius-full: 9999px;

    /* ── Shadow scale ── */
    --shadow-xs:  0 1px 2px rgba(15, 23, 42, 0.05);
    --shadow-sm:  0 2px 8px rgba(15, 23, 42, 0.06);
    --shadow-md:  0 10px 25px rgba(15, 23, 42, 0.06);
    --shadow-lg:  0 20px 40px rgba(15, 23, 42, 0.08);
    --shadow-xl:  0 25px 50px rgba(15, 23, 42, 0.12);

    /* ── Typography ── */
    --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    --tracking-tight: -0.02em;
    --leading-tight: 1.1;
    --leading-normal: 1.5;

    /* ── Sidebar ── */
    --sidebar-width: 260px;
    --sidebar-collapsed-width: 64px;
    --sidebar-bg:   var(--slate-900);
    --sidebar-bg-2: var(--slate-800);
    --sidebar-text:       rgba(255, 255, 255, 0.8);
    --sidebar-text-hover: #ffffff;
    --sidebar-active-bg:  rgba(255, 255, 255, 0.12);
    --sidebar-divider:    rgba(255, 255, 255, 0.12);

    /* ── Transition ── */
    --transition-fast: 100ms ease;
    --transition:      200ms ease;
    --transition-slow: 350ms ease;

    /* ── Topbar ── */
    --topbar-height: 72px;
}

/* ── Dark mode tokens ── */
[data-theme="dark"] {
    --surface-page:   #040D1A;
    --surface-card:   rgba(255, 255, 255, 0.06);
    --surface-raised: rgba(255, 255, 255, 0.09);
    --surface-inset:  rgba(255, 255, 255, 0.03);
    --surface-hover:  rgba(255, 255, 255, 0.08);
    --surface-overlay: rgba(255, 255, 255, 0.06);

    --text-primary:   #f1f5f9;
    --text-secondary: #94a3b8;
    --text-muted:     #64748b;
    --text-inverse:   var(--slate-900);
    --text-link:      var(--bs-brand-cyan);

    --border-default: rgba(255, 255, 255, 0.12);
    --border-subtle:  rgba(255, 255, 255, 0.08);
    --border-strong:  rgba(255, 255, 255, 0.18);

    --shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-sm:  0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md:  0 10px 25px rgba(0, 0, 0, 0.3);
    --shadow-lg:  0 20px 40px rgba(0, 0, 0, 0.4);
    --shadow-xl:  0 25px 50px rgba(0, 0, 0, 0.5);

    color-scheme: dark;
}