/* ============================================================
   Atlas Design Tokens
   Brand: Atlas Sistemas  |  Foundation for application UI
   ============================================================ */

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

:root {
    /* ---------- Brand: navy ---------- */
    --color-navy-900: #0A1228;
    --color-navy-800: #0E1B3D;
    --color-navy-700: #1E2A5E;

    /* ---------- Brand: blue ---------- */
    --color-blue-600: #1E45CC;
    --color-blue-500: #2C5BFF;
    --color-blue-100: #DCE9FF;
    --color-blue-50:  #E8F1FF;

    /* ---------- Brand: cyan ---------- */
    --color-cyan-500: #06B6D4;
    --color-cyan-400: #00C8E8;

    /* ---------- Status ---------- */
    --color-success: #10B981;
    --color-warning: #F59E0B;
    --color-danger:  #EF4444;

    /* ---------- Surface ---------- */
    --color-bg:         #F8FAFC;
    --color-surface:    #FFFFFF;
    --color-text:       #0F172A;
    --color-text-muted: #475569;
    --color-border:     #E2E8F0;

    /* ---------- Gradients ---------- */
    --gradient-primary:      linear-gradient(135deg, #1E45CC 0%, #06B6D4 100%);
    --gradient-primary-soft: linear-gradient(135deg, rgba(30,69,204,0.10) 0%, rgba(6,182,212,0.10) 100%);
    --gradient-navy:         linear-gradient(180deg, #0E1B3D 0%, #0A1228 100%);

    /* ---------- Radius ---------- */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-pill: 999px;

    /* ---------- Shadow ---------- */
    --shadow-sm:        0 1px 2px rgba(15,23,42,0.06);
    --shadow-md:        0 4px 12px rgba(15,23,42,0.08);
    --shadow-lg:        0 12px 32px rgba(15,23,42,0.10);
    --shadow-glow-cyan: 0 0 20px rgba(0,200,232,0.35);

    /* ---------- Type ---------- */
    --font-family-base: 'Manrope', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-weight-regular:    400;
    --font-weight-medium:     500;
    --font-weight-semibold:   600;
    --font-weight-bold:       700;
    --font-weight-extrabold:  800;

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

    /* ---------- Z-index ---------- */
    --z-sidebar: 1020;
    --z-topbar:  1030;
    --z-modal:   1050;
    --z-toast:   1080;

    /* ---------- Bootstrap variable overrides ---------- */
    --bs-primary:           var(--color-blue-600);
    --bs-primary-rgb:       30, 69, 204;
    --bs-link-color:        var(--color-blue-600);
    --bs-link-hover-color:  var(--color-blue-500);
    --bs-body-font-family:  var(--font-family-base);
    --bs-body-color:        var(--color-text);
    --bs-body-bg:           var(--color-bg);
    --bs-border-color:      var(--color-border);
    --bs-border-radius:     var(--radius-md);
    --bs-success:           var(--color-success);
    --bs-success-rgb:       16, 185, 129;
    --bs-warning:           var(--color-warning);
    --bs-warning-rgb:       245, 158, 11;
    --bs-danger:            var(--color-danger);
    --bs-danger-rgb:        239, 68, 68;
    --bs-info:              var(--color-cyan-500);
    --bs-info-rgb:          6, 182, 212;

    /* ---------- Extended (CRUD components — iteration 4b) ---------- */
    --color-blue-25:    #F4F8FF;
    --color-border-soft:#EEF2F7;
    --color-text-soft:  #6E7D9E;
    --color-text-dim:   #94A3B8;
    --color-success-50: #D1FAE5;
    --color-warning-50: #FEF3C7;
    --color-danger-50:  #FEE2E2;
    --color-amber-50:   #FFFBEB;
    --shadow-glow:      0 8px 24px rgba(30, 69, 204, 0.20);
    --shadow-glow-soft: 0 8px 24px rgba(30, 69, 204, 0.12);
}

/* ============================================================
   Reset & Base
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    margin: 0;
    font-family: var(--font-family-base);
    font-weight: var(--font-weight-regular);
    color: var(--color-text);
    background-color: var(--color-bg);
    line-height: 1.55;
    letter-spacing: -0.005em;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-base);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    letter-spacing: -0.02em;
    line-height: 1.2;
}

a {
    color: var(--color-blue-600);
    text-decoration: none;
    transition: color 150ms ease;
}

a:hover { color: var(--color-blue-500); }

::selection {
    background: rgba(0, 200, 232, 0.25);
    color: var(--color-text);
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: rgba(15, 23, 42, 0.15);
    border-radius: var(--radius-pill);
    border: 2px solid transparent;
    background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(15, 23, 42, 0.30);
    background-clip: padding-box;
}