/* ============================================================================
   SPURA HUB v3 — Design Tokens
   Concepto: Minimalist · High-End · Corporate
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

:root {
    color-scheme: light;
    --font-sans: 'Inter', system-ui, -apple-system, sans-serif;

    /* ── Brand (Teal refinado — más contemporáneo y premium) ─────────── */
    --brand-50:  #f0fdfa;
    --brand-100: #ccfbf1;
    --brand-200: #99f6e4;
    --brand-300: #5eead4;
    --brand-400: #2dd4bf;
    --brand-500: #14b8a6;
    --brand-600: #0d9488;
    --brand-700: #0f766e;
    --brand-800: #115e59;
    --brand-900: #134e4a;

    /* RGB helper para focus rings */
    --brand-500-rgb: 20, 184, 166;

    /* ── Ink Scale (escala con tono azul profundo) ───────────────────── */
    --ink-950: #050A14;
    --ink-900: #0A1628;
    --ink-800: #0F2040;
    --ink-700: #1A2F4A;
    --ink-600: #2C3E55;
    --ink-400: #64748B;
    --ink-300: #94A3B8;
    --ink-200: #CBD5E1;
    --ink-100: #E2E8F0;
    --ink-50:  #F1F5F9;

    /* ── Surfaces ────────────────────────────────────────────────────── */
    --bg-primary:      #F7F9FC;
    --bg-secondary:    #F1F5F9;
    --bg-surface:      #FFFFFF;
    --bg-surface-hover: #F7F9FC;

    /* ── Bordes ──────────────────────────────────────────────────────── */
    --border-color:        #EAECF0;
    --border-color-strong: #D0D5DD;

    /* ── Texto ───────────────────────────────────────────────────────── */
    --text-primary:   var(--ink-950);
    --text-secondary: var(--ink-400);
    --text-muted:     var(--ink-300);
    --text-inverse:   #FFFFFF;

    /* ── Semánticos ──────────────────────────────────────────────────── */
    --success-50:  #ECFDF5;
    --success-500: #10B981;
    --success-600: #059669;
    --warning-50:  #FFFBEB;
    --warning-500: #F59E0B;
    --warning-600: #D97706;
    --danger-50:   #FEF2F2;
    --danger-500:  #EF4444;
    --danger-600:  #DC2626;
    --info-50:     #EFF6FF;
    --info-500:    #3B82F6;
    --info-600:    #2563EB;

    /* ── Sombras (premium — capas sutiles) ───────────────────────────── */
    --shadow-xs: 0 1px 2px 0 rgba(16, 24, 40, .04);
    --shadow-sm: 0 1px 3px rgba(16, 24, 40, .06), 0 1px 2px rgba(16, 24, 40, .04);
    --shadow-md: 0 4px 8px -2px rgba(16, 24, 40, .08), 0 2px 4px -2px rgba(16, 24, 40, .04);
    --shadow-lg: 0 12px 24px -4px rgba(16, 24, 40, .08), 0 4px 8px -2px rgba(16, 24, 40, .04);
    --shadow-xl: 0 20px 40px -8px rgba(16, 24, 40, .12), 0 8px 16px -4px rgba(16, 24, 40, .06);

    /* ── Radios ──────────────────────────────────────────────────────── */
    --radius-sm:   6px;
    --radius-md:   10px;
    --radius-lg:   14px;
    --radius-xl:   20px;
    --radius-full: 9999px;

    /* ── Espaciado ───────────────────────────────────────────────────── */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-8:  32px;
    --space-10: 40px;
    --space-12: 48px;

    /* ── Shell ───────────────────────────────────────────────────────── */
    --sidebar-width: 248px;
    --topbar-height: 60px;
}

/* ── Dark Theme ──────────────────────────────────────────────────────── */
:root[data-theme='dark'] {
    color-scheme: dark;
    --bg-primary:       #0A0F1E;
    --bg-secondary:     #111827;
    --bg-surface:       #111827;
    --bg-surface-hover: #1E293B;
    --border-color:        #1E293B;
    --border-color-strong: #2D3748;
    --text-primary:   #F1F5F9;
    --text-secondary: #94A3B8;
    --text-muted:     #475569;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, .3);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, .35);
    --shadow-lg: 0 12px 24px rgba(0, 0, 0, .4);
}