/* ============================================================
   Operator OS · Design Tokens
   Pegar este archivo TAL CUAL en wwwroot/css/operator-os.tokens.css
   Cargar PRIMERO, antes de operator-os.components.css
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap');

:root {
    /* Zinc base — slightly tuned for higher contrast */
    --z-1000: #07070A;
    --z-975:  #0B0B0E;
    --z-950:  #0F0F12;
    --z-925:  #131316;
    --z-900:  #18181B;
    --z-875:  #1C1C1F;
    --z-850:  #232327;
    --z-800:  #2A2A2E;
    --z-750:  #34343A;
    --z-700:  #4A4A52;
    --z-600:  #62626B;
    --z-500:  #82828A;
    --z-400:  #A6A6AD;
    --z-300:  #D4D4D8;
    --z-200:  #E4E4E7;
    --z-100:  #F4F4F5;
    --z-50:   #FAFAFA;

    /* Accent — amber signature, used surgically */
    --amber:        #F5B800;
    --amber-bright: #FFC830;
    --amber-deep:   #C99500;
    --amber-tint-5:  rgba(245, 184, 0, .05);
    --amber-tint-10: rgba(245, 184, 0, .10);
    --amber-tint-20: rgba(245, 184, 0, .20);
    --amber-tint-30: rgba(245, 184, 0, .30);

    /* Status */
    --emerald: #10B981;
    --emerald-tint: rgba(16, 185, 129, .12);
    --rose:    #F43F5E;
    --rose-tint: rgba(244, 63, 94, .12);
    --sky:     #38BDF8;
    --sky-tint: rgba(56, 189, 248, .12);
    --violet:  #A78BFA;
    --violet-tint: rgba(167, 139, 250, .12);

    --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', 'Roboto Mono', monospace;

    --drawer-w: 232px;
    --topbar-h: 52px;
    --content-max: 1440px;

    --r-xs: 4px;
    --r-sm: 6px;
    --r-md: 8px;
    --r-lg: 12px;
    --r-xl: 16px;
    --r-2xl: 20px;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, .25), 0 1px 2px rgba(0, 0, 0, .35);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, .45), 0 2px 6px rgba(0, 0, 0, .3);
    --shadow-glow-amber: 0 0 0 1px var(--amber-tint-30), 0 8px 24px var(--amber-tint-20);
    --ring-amber: 0 0 0 3px var(--amber-tint-30);

    --ease: cubic-bezier(.2, .8, .2, 1);
    --t-fast: 120ms;
    --t-med: 180ms;
    --t-slow: 280ms;

    --bg:           var(--z-1000);
    --bg-elev:      var(--z-975);
    --surface:      var(--z-925);
    --surface-2:    var(--z-900);
    --surface-3:    var(--z-875);
    --hover:        var(--z-875);
    --border:       var(--z-850);
    --border-strong: var(--z-800);
    --border-hover: var(--z-700);
    --text-hi:      var(--z-50);
    --text:         var(--z-100);
    --text-2:       var(--z-200);
    --text-dim:     var(--z-400);
    --text-mute:    var(--z-500);
    --text-faint:   var(--z-600);

    color-scheme: dark;
}

/* ============================================================
   Light theme — inverts neutral ramp; amber + status stay constant.
   Strategy: literal z-* values flip, then semantic tokens are remapped
   so .card / .topbar / .nav-item etc. need no extra rules.
   ============================================================ */
[data-theme="light"] {
    --z-1000: #F7F7F4;     /* page bg — warm off-white */
    --z-975:  #FBFBF8;     /* drawer */
    --z-950:  #F2F2EE;     /* table head bg */
    --z-925:  #FFFFFF;     /* cards / elevated surface */
    --z-900:  #F8F8F4;
    --z-875:  #EEEEE8;     /* hover */
    --z-850:  #E2E2DA;     /* border default */
    --z-800:  #CFCFC6;     /* border strong */
    --z-750:  #B6B6AC;
    --z-700:  #8E8E84;     /* border hover */
    --z-600:  #6B6B62;
    --z-500:  #565650;     /* mute text */
    --z-400:  #3F3F3A;     /* dim text */
    --z-300:  #27272A;
    --z-200:  #18181B;     /* primary text */
    --z-100:  #0F0F11;     /* high text */
    --z-50:   #09090B;     /* hi/title */

    --amber:        #D49B00;
    --amber-bright: #E6AB10;
    --amber-deep:   #A87A00;
    --amber-tint-5:  rgba(212, 155, 0, .06);
    --amber-tint-10: rgba(212, 155, 0, .12);
    --amber-tint-20: rgba(212, 155, 0, .20);
    --amber-tint-30: rgba(212, 155, 0, .30);

    --emerald: #047857;
    --emerald-tint: rgba(4, 120, 87, .10);
    --rose:    #BE123C;
    --rose-tint: rgba(190, 18, 60, .08);
    --sky:     #0369A1;
    --sky-tint: rgba(3, 105, 161, .08);
    --violet:  #6D28D9;
    --violet-tint: rgba(109, 40, 217, .08);

    --shadow-sm: 0 1px 2px rgba(20, 20, 30, .04), 0 0 0 1px rgba(20, 20, 30, .04);
    --shadow-md: 0 4px 12px rgba(20, 20, 30, .06), 0 0 0 1px rgba(20, 20, 30, .04);
    --shadow-lg: 0 18px 40px rgba(20, 20, 30, .10), 0 0 0 1px rgba(20, 20, 30, .04);
    --shadow-glow-amber: 0 0 0 1px var(--amber-tint-30), 0 8px 24px var(--amber-tint-20);
    --ring-amber: 0 0 0 3px var(--amber-tint-30);

    color-scheme: light;
}

/* Topbar gets a translucent light backdrop in light mode */
[data-theme="light"] .topbar { background: rgba(251, 251, 248, .78); }

/* Active nav-item background must read as a darker accent, not just hover */
[data-theme="light"] .nav-item.active { background: #EDE8DA; color: var(--z-50); }
[data-theme="light"] .nav-item:hover { background: #F0EFEA; }

/* KPIs / cards / table — gentle border + zero-shadow look */
[data-theme="light"] .card,
[data-theme="light"] .kpi,
[data-theme="light"] .tbl-wrap,
[data-theme="light"] .filter-bar,
[data-theme="light"] .account-card { box-shadow: var(--shadow-sm); }

[data-theme="light"] .tbl thead th { background: #F4F4EF; }
[data-theme="light"] .tbl tbody tr:hover td { background: #FAF9F4; }

/* Buttons */
[data-theme="light"] .btn-primary { color: #1A1200; }
[data-theme="light"] .submit { color: #1A1200; }
[data-theme="light"] .btn-secondary { background: var(--z-200); color: var(--z-1000); box-shadow: 0 0 0 1px var(--z-300); }
[data-theme="light"] .btn-secondary:hover { background: var(--z-100); }
[data-theme="light"] .btn-ghost { background: var(--z-925); color: var(--z-100); border-color: var(--z-850); }
[data-theme="light"] .btn-ghost:hover { background: var(--z-875); border-color: var(--z-800); }

/* Avatar gradient adjusted */
[data-theme="light"] .avatar { box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 0 0 1px var(--z-850); }

/* Org switcher mark + ML mark stay vibrant */
[data-theme="light"] .org-switch { background: var(--z-925); }

/* Selection */
[data-theme="light"] ::selection { background: var(--amber-tint-30); color: var(--z-50); }

/* Scrollbar */
[data-theme="light"] *::-webkit-scrollbar-thumb { background: #D2D2C8; border: 2px solid transparent; background-clip: content-box; }
[data-theme="light"] *::-webkit-scrollbar-thumb:hover { background: #B6B6AC; background-clip: content-box; border: 2px solid transparent; }

/* Step bg */
[data-theme="light"] .step-num { background: var(--z-850); color: var(--z-500); }

/* Logo color */
[data-theme="light"] .brand .logo,
[data-theme="light"] .brand-lockup { color: var(--z-50); }

/* Mark for unread notifs */
[data-theme="light"] .notif.unread { background: rgba(212, 155, 0, .07); }
[data-theme="light"] .notif.unread:hover { background: rgba(212, 155, 0, .12); }

/* Audit row borders + actor color */
[data-theme="light"] .audit-msg .actor { color: var(--amber-deep); }

/* Input adjustments */
[data-theme="light"] .input,
[data-theme="light"] .select,
[data-theme="light"] .textarea,
[data-theme="light"] .filter-input,
[data-theme="light"] .filter-select,
[data-theme="light"] .kbd-trigger { background: var(--z-925); }
[data-theme="light"] .filter-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10' fill='none' stroke='%2356565a' stroke-width='1.5'%3E%3Cpath d='M2 4l3 3 3-3'/%3E%3C/svg%3E"); }

/* kbd */
[data-theme="light"] .kbd { background: #F0EFEA; border-color: #DDDCD3; color: var(--z-400); }

/* Cb */
[data-theme="light"] .cb { background: var(--z-925); border-color: var(--z-750); }
[data-theme="light"] .cb.checked { background: var(--amber); border-color: var(--amber); color: white; }

/* Switch off track */
[data-theme="light"] .switch-track { background: var(--z-800); }
[data-theme="light"] .switch-track::before { background: white; box-shadow: 0 1px 3px rgba(0,0,0,.15); }
[data-theme="light"] .switch input:checked + .switch-track::before { background: white; }

/* ============================================================
   Accessibility — focus rings + reduced motion
   ============================================================ */
.btn:focus-visible,
.icon-btn:focus-visible,
.chip:focus-visible,
.user-pill:focus-visible,
.org-switch:focus-visible,
.tab:focus-visible,
.cb:focus-visible {
    outline: none;
    box-shadow: var(--ring-amber);
}

.nav-item:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 1px var(--amber-tint-30);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: 0ms !important;
        animation-duration: 0ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
}