/* public/css/tokens.css — SINGLE SOURCE OF TRUTH for the Fenxio design system.
   Both portals consume these variables; NO portal stylesheet may define its own
   :root token block or raw brand colors (enforced by test/portal.test.js).
   Runtime rebranding overrides --accent-* here via inline custom properties. */

[hidden] { display: none !important; }

:root {
    --bs-body-color: var(--text-primary);
    --bs-secondary-color: var(--text-secondary);
    --bs-body-bg: var(--bg-canvas);
    --font-heading: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'JetBrains Mono', monospace;

    /* Canvas & surfaces */
    --bg-canvas: #090c11;
    --bg-sidebar: #0d121e;
    --bg-header: #0d121e;
    --bg-card: #0f172a;
    --bg-card-hover: rgba(22, 33, 58, 0.9);
    --bg-surface: #0f172a;
    --bg-surface-elevated: #1e293b;
    --bg-input: rgba(10, 15, 29, 0.85);

    /* Borders */
    --border-glass: rgba(255, 255, 255, 0.09);
    --border-glass-hover: rgba(37, 99, 235, 0.45);
    --border-glass-focus: #2563eb;

    /* Brand accents (rebrand overrides --accent-blue family only).
       D01: the default accent is #2563eb — white-on-accent text measures
       5.17:1 (WCAG AA); the old #3b82f6 measured 3.68:1 and failed. */
    --accent-blue: #2563eb;
    --accent-blue-hover: #1d4ed8;
    --accent-glow: rgba(37, 99, 235, 0.3);
    --accent-glow-strong: rgba(37, 99, 235, 0.5);
    --accent-tint: rgba(37, 99, 235, 0.1);
    --accent-border-soft: rgba(37, 99, 235, 0.4);
    /* Secondary (sky) accent — decorative highlights */
    --accent-sky: #0ea5e9;
    --accent-sky-border: rgba(14, 165, 233, 0.4);
    --accent-sky-soft: rgba(14, 165, 233, 0.3);
    --accent-sky-tint: rgba(14, 165, 233, 0.08);

    /* Text (WCAG AA on the dark canvas) */
    --text-primary: #f8fafc;
    --text-secondary: #94a3b8;
    /* #64748b failed WCAG AA (~3.75:1) at the small sizes it's used for */
    --text-muted: #8b9bb0;
    --text-link: #93c5fd;
    --text-on-accent: #ffffff;

    /* Status */
    --status-active: #10b981;
    --status-active-text: #6ee7b7;
    --status-active-bg: rgba(16, 185, 129, 0.15);
    --status-active-border: rgba(16, 185, 129, 0.3);
    --status-expired: #ef4444;
    --status-expired-text: #fca5a5;
    --status-expired-bg: rgba(239, 68, 68, 0.15);
    --status-expired-border: rgba(239, 68, 68, 0.3);
    --status-online: #10b981;
    --status-offline: #ef4444;

    /* Layout (admin) */
    --sidebar-width: 250px;
    --header-height: 68px;

    /* Shape & depth */
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-full: 9999px;

    --shadow-card: 0 8px 24px -12px rgba(0, 0, 0, 0.45);
    --shadow-card-hover: 0 25px 50px -12px rgba(59, 130, 246, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.15);

    /* Motion */
    --transition: color 0.18s ease-out, background-color 0.18s ease-out, border-color 0.18s ease-out, opacity 0.18s ease-out;
}

/* Shared state, accessibility and brand bridges for the vendored component layer. */
.text-primary { color: var(--text-link) !important; }
.bg-primary-subtle { background-color: var(--accent-tint) !important; }
.border-primary-subtle { border-color: var(--accent-border-soft) !important; }
.btn-outline-primary { --bs-btn-color: var(--text-primary); --bs-btn-border-color: var(--accent-blue); --bs-btn-hover-bg: var(--accent-blue); --bs-btn-hover-border-color: var(--accent-blue); }
img.brand-logo { max-width: 10rem; max-height: 3rem; object-fit: contain; margin-bottom: 1rem; }
img.brand-logo[hidden] { display:none; }
.portal-legal { display:flex; justify-content:center; flex-wrap:wrap; gap:1.25rem; padding:1.5rem; font-size:.9rem; }
.expiry-detail { color:var(--text-secondary); font-size:.9rem; margin-block:1.5rem; }
.interface-toast { display:grid !important; grid-template-columns:minmax(0,1fr) 44px; align-items:start; gap:12px; padding:12px; width:min(24rem, calc(100vw - 24px)); }
.interface-toast .toast-body { min-width:0; padding:0; overflow-wrap:anywhere; }
.interface-toast button { min-width:44px; min-height:44px; }
.toast-container { max-width:100%; padding:12px !important; }
.interface-dialog-backdrop { position:fixed; inset:0; z-index:11000; background:rgba(0,0,0,.72); display:grid; place-items:center; padding:1rem; }
.interface-dialog { width:min(100%,32rem); background:var(--bg-surface-elevated); border-radius:var(--radius-md); padding:1.75rem; box-shadow:var(--shadow-card); }
.interface-dialog h2 { font-size:1.3rem; margin-bottom:1.25rem; }
.interface-dialog p { color:var(--text-secondary); overflow-wrap:anywhere; }
.interface-dialog button { margin-inline-end:.75rem; margin-top:1rem; min-height:2.75rem; }
[aria-disabled="true"] { opacity:.55; }
.auth-loading { min-height:100vh; display:grid; place-items:center; color:var(--text-secondary); }
.empty-state { padding:2rem !important; text-align:center; color:var(--text-secondary); }
.loading-skeleton { min-height:1.75rem; background:var(--bg-surface-elevated); border-radius:var(--radius-sm); animation:skeleton-pulse 1.4s ease-in-out infinite alternate; }
@keyframes skeleton-pulse { to { opacity:.45; } }
@media (prefers-reduced-motion: reduce) { .loading-skeleton { animation:none; } }
@media (forced-colors:active) { .card,.glass-card,.info-box,.interface-dialog { border:1px solid CanvasText; } }
[dir="rtl"] .input-group { direction:rtl; }
[dir="rtl"] input[type="password"], [dir="rtl"] code, [dir="rtl"] textarea { direction:ltr; text-align:start; }

.language-picker { display:flex; justify-content:flex-end; align-items:center; flex-wrap:wrap; gap:.6rem; padding:.65rem 1rem; font-size:.8rem; color:var(--text-secondary); }
.language-picker select { width:auto; min-width:8rem; }
[data-surface="admin"]>.language-picker { position:fixed; inset-inline-end:1rem; top:4.5rem; z-index:1010; }

body a { color:var(--text-link); }
body a:hover { color:var(--text-primary); }
p a, li a, .setup-guide-box a, .portal-legal a { text-decoration:underline; text-underline-offset:.2em; }

/* Bootstrap's pale subtle backgrounds belong to its light theme. */
.bg-warning-subtle { background-color:rgba(251,191,36,.12) !important; }
.bg-danger-subtle { background-color:rgba(239,68,68,.12) !important; }
.bg-success-subtle { background-color:var(--status-active-bg) !important; }
.bg-info-subtle { background-color:var(--accent-sky-tint) !important; }
.bg-secondary-subtle { background-color:var(--bg-surface-elevated) !important; }
.text-warning { color:#fbbf24 !important; }
.text-danger { color:#fca5a5 !important; }
.text-success { color:#6ee7b7 !important; }
.text-info { color:#7dd3fc !important; }

.card { --bs-card-color:var(--text-primary); color:var(--text-primary); }
code { color:var(--text-link); }

.btn-info { --bs-btn-bg:#0369a1; --bs-btn-border-color:#0369a1; --bs-btn-hover-bg:#075985; --bs-btn-hover-border-color:#075985; --bs-btn-color:#fff; --bs-btn-hover-color:#fff; }

h1,h2,h3,h4,h5,h6,p,label,.brand-logo,[data-brand-name] { overflow-wrap:anywhere; }
.info-box-value > span { min-width:0; overflow-wrap:anywhere; }