@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');

/* ══════════════════════════════════════════════════════════════
   LockTrace — Design tokens
   Primary: Inter Variable   Mono: JetBrains Mono
   ══════════════════════════════════════════════════════════════ */

:root {
    /* Brand */
    --lt-brand:      #2E75D4;
    --lt-brand-acc:  #5A9FE8;

    /* Status — heilig, nooit herbestemmen */
    --lt-ok:         #2FD6A1;
    --lt-warn:       #F59E0B;
    --lt-denied:     #FC2647;
    --lt-info:       #38BDF8;
    --lt-unknown:    #6B7280;

    /* Dark canvas (default) */
    --lt-canvas:     #08090a;
    --lt-surf:       #0f1012;
    --lt-surf-hover: rgba(255,255,255,0.03);
    --lt-border:     rgba(255,255,255,0.06);
    --lt-text:       #f7f8f8;
    --lt-muted:      rgba(247,248,248,0.52);
    --lt-faint:      rgba(247,248,248,0.28);

    /* Legacy tokens — backward compat met Tailwind classes */
    --color-bg:      #08090a;
    --color-surface: #0f1012;
    --color-border:  rgba(255,255,255,0.06);
    --color-text:    #f7f8f8;
    --color-brand:   #2E75D4;
    --color-primary: #2E75D4;
    --color-muted:   rgba(247,248,248,0.40);
}

/* ── Light mode ── */
[data-theme="light"],
[data-theme="keyrol"] {
    --lt-canvas:     #f7f8f8;
    --lt-surf:       #ffffff;
    --lt-surf-hover: rgba(0,0,0,0.03);
    --lt-border:     #e6e6e6;
    --lt-text:       #1a1a1c;
    --lt-muted:      #6b7280;
    --lt-faint:      #94a3b8;

    --color-bg:      #f7f8f8;
    --color-surface: #ffffff;
    --color-border:  #e6e6e6;
    --color-text:    #1a1a1c;
    --color-brand:   #2E75D4;
    --color-primary: #2E75D4;
    --color-muted:   #6b7280;
}

/* ══════════════════════════════════════════════════════════════
   Base
   ══════════════════════════════════════════════════════════════ */

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

html { background-color: var(--lt-canvas); }

body {
    font-family: 'JetBrains Mono', 'Menlo', 'Consolas', monospace;
    font-size: 13.5px;
    font-feature-settings: normal;
    -webkit-font-smoothing: antialiased;
    /* Ambient brand glow — dark mode only, ≤8% opacity per design brief */
    background-image:
        radial-gradient(ellipse 80% 55% at 50% -8%, rgba(46,117,212,0.08) 0%, transparent 70%),
        radial-gradient(ellipse 40% 28% at 88% 92%, rgba(46,117,212,0.04) 0%, transparent 60%);
    background-attachment: fixed;
}

[data-theme="light"] body,
[data-theme="keyrol"] body {
    background-image: none;
}

/* ══════════════════════════════════════════════════════════════
   Nav — logo + wordmark
   ══════════════════════════════════════════════════════════════ */

nav.surface {
    background-color: var(--lt-canvas) !important;
}

[data-theme="light"] nav.surface,
[data-theme="keyrol"] nav.surface {
    background-color: var(--lt-canvas) !important;
    box-shadow: 0 1px 0 var(--lt-border);
}

.lt-logo-link {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

.lt-logo-link:hover .lt-wordmark { color: var(--lt-brand-acc); }

.lt-wordmark {
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 510;
    font-size: 17px;
    letter-spacing: -0.025em;
    color: var(--lt-text);
    font-feature-settings: "cv01", "ss03";
    transition: color 0.15s;
}

/* ══════════════════════════════════════════════════════════════
   Typography overrides — headings in Inter
   ══════════════════════════════════════════════════════════════ */

h1, h2, h3, h4 {
    font-family: 'Inter', system-ui, sans-serif;
    font-feature-settings: "cv01", "ss03";
}

h1 { font-weight: 510; letter-spacing: -0.02em; }
h2 { font-weight: 510; }

/* Page headers in HTML (text-xl font-semibold) */
.text-xl { font-family: 'Inter', sans-serif; font-feature-settings: "cv01","ss03"; }

/* ══════════════════════════════════════════════════════════════
   Status pills — pill radius (9999px) per design brief
   ══════════════════════════════════════════════════════════════ */

/* Force pill radius on status badges */
.rounded-full { border-radius: 9999px; }

/* ══════════════════════════════════════════════════════════════
   Light mode card shadows
   ══════════════════════════════════════════════════════════════ */

[data-theme="light"] .surface,
[data-theme="keyrol"] .surface {
    box-shadow: 0 1px 3px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.04);
}

[data-theme="light"] nav.surface,
[data-theme="keyrol"] nav.surface {
    box-shadow: 0 1px 0 var(--lt-border) !important;
}

/* ══════════════════════════════════════════════════════════════
   Tailwind dark-class overrides for light mode
   ══════════════════════════════════════════════════════════════ */

[data-theme="light"] .text-slate-200,
[data-theme="keyrol"] .text-slate-200  { color: #1a1a1c !important; }

[data-theme="light"] .text-slate-300,
[data-theme="keyrol"] .text-slate-300  { color: #334155 !important; }

[data-theme="light"] .text-slate-400,
[data-theme="keyrol"] .text-slate-400  { color: #4b5563 !important; }

[data-theme="light"] .text-slate-500,
[data-theme="keyrol"] .text-slate-500  { color: #6b7280 !important; }

[data-theme="light"] .text-slate-600,
[data-theme="keyrol"] .text-slate-600  { color: #4b5563 !important; }

[data-theme="light"] .bg-slate-900,
[data-theme="keyrol"] .bg-slate-900    { background-color: #f7f8f8 !important; }

[data-theme="light"] .bg-slate-800,
[data-theme="keyrol"] .bg-slate-800    { background-color: #edeef0 !important; }

[data-theme="light"] .bg-slate-700,
[data-theme="keyrol"] .bg-slate-700    { background-color: #e2e4e8 !important; }

[data-theme="light"] .hover\:bg-slate-800:hover,
[data-theme="keyrol"] .hover\:bg-slate-800:hover { background-color: #f0f1f3 !important; }

[data-theme="light"] .hover\:bg-slate-700:hover,
[data-theme="keyrol"] .hover\:bg-slate-700:hover { background-color: #e6e7ea !important; }

[data-theme="light"] .hover\:text-white:hover,
[data-theme="keyrol"] .hover\:text-white:hover   { color: #1a1a1c !important; }

[data-theme="light"] .placeholder-slate-600::placeholder,
[data-theme="keyrol"] .placeholder-slate-600::placeholder { color: #94a3b8 !important; }

[data-theme="light"] .border-slate-600,
[data-theme="keyrol"] .border-slate-600 { border-color: #e6e6e6 !important; }

[data-theme="light"] .border-slate-700,
[data-theme="keyrol"] .border-slate-700 { border-color: #e6e6e6 !important; }

/* Nav dividers in light mode */
[data-theme="light"] .bg-slate-700,
[data-theme="keyrol"] .bg-slate-700  { background-color: #d1d5db !important; }

/* ══════════════════════════════════════════════════════════════
   Brand color overrides — blue-* Tailwind → LockTrace brand
   ══════════════════════════════════════════════════════════════ */

.bg-blue-600  { background-color: var(--lt-brand)  !important; }
.hover\:bg-blue-700:hover { background-color: #2469c2 !important; }
.text-blue-400 { color: var(--lt-brand-acc) !important; }
.focus\:border-blue-500:focus { border-color: var(--lt-brand) !important; outline: none; }

/* ══════════════════════════════════════════════════════════════
   Table row hover — use luminance step, not Tailwind's slate-800
   ══════════════════════════════════════════════════════════════ */

tr.hover\:bg-slate-800:hover,
tr.hover\:bg-slate-800:hover td {
    background-color: var(--lt-surf-hover) !important;
}

/* Light mode row hover */
[data-theme="light"] tr.hover\:bg-slate-800:hover td,
[data-theme="keyrol"] tr.hover\:bg-slate-800:hover td {
    background-color: rgba(46,117,212,0.04) !important;
}