/* ========================================================================== tokeno.css — Design System Dark navy theme: matched to marketing page palette. All colour decisions are driven by CSS custom properties defined here. ========================================================================== */ /* ── Design tokens ────────────────────────────────────────────────────────── */ :root { --tk-bg: #05080F; /* page background */ --tk-bg2: #080D1A; /* topbar / subtle surfaces */ --tk-bg3: #0C1426; /* sidebar / card headers / input backgrounds */ --tk-card: #0F1A30; /* cards / section-cards */ --tk-border: rgba(99, 141, 220, .18); --tk-border-glow: rgba(56, 189, 248, .32); --tk-blue: #3B82F6; --tk-sky: #38BDF8; --tk-cyan: #22D3EE; --tk-indigo: #6366F1; --tk-green: #10B981; --tk-amber: #F59E0B; --tk-red: #EF4444; --tk-purple: #A855F7; --tk-text: #EFF6FF; --tk-text2: #C7D7F5; /* slightly dimmer body text */ --tk-muted: #7E96C0; /* secondary / label text */ --tk-faint: #1E3156; /* very subtle tint / dividers */ --tk-grad: linear-gradient(135deg, #3B82F6 0%, #22D3EE 100%); --tk-grad2: linear-gradient(135deg, #6366F1 0%, #3B82F6 100%); } /* ── Bootstrap 5.3 dark-theme variable overrides ─────────────────────────── */ /* Activated by data-bs-theme="dark" on in layout.html */ [data-bs-theme="dark"] { --bs-body-bg: var(--tk-bg); --bs-body-color: var(--tk-text2); --bs-secondary-bg: var(--tk-bg3); --bs-tertiary-bg: var(--tk-bg2); --bs-border-color: var(--tk-border); --bs-border-color-translucent: rgba(99, 141, 220, .12); --bs-emphasis-color: var(--tk-text); --bs-secondary-color: var(--tk-muted); --bs-tertiary-color: rgba(239, 246, 255, .35); --bs-link-color: var(--tk-sky); --bs-link-hover-color: var(--tk-cyan); --bs-primary: var(--tk-blue); --bs-primary-rgb: 59, 130, 246; --bs-card-bg: var(--tk-card); --bs-card-border-color: var(--tk-border); --bs-table-bg: transparent; --bs-table-striped-bg: rgba(56, 189, 248, .04); --bs-table-hover-bg: rgba(56, 189, 248, .07); --bs-table-color: var(--tk-text2); --bs-table-border-color: var(--tk-border); --bs-input-bg: var(--tk-bg3); --bs-input-border-color: var(--tk-border); --bs-input-focus-border-color: var(--tk-blue); --bs-input-color: var(--tk-text); --bs-input-placeholder-color: var(--tk-muted); --bs-modal-bg: var(--tk-card); --bs-modal-header-border-color: var(--tk-border); --bs-modal-footer-border-color: var(--tk-border); --bs-dropdown-bg: var(--tk-bg3); --bs-dropdown-border-color: var(--tk-border); --bs-dropdown-link-color: var(--tk-text2); --bs-dropdown-link-hover-bg: rgba(56, 189, 248, .08); --bs-dropdown-link-hover-color: var(--tk-text); --bs-nav-tabs-border-color: var(--tk-border); --bs-nav-tabs-link-active-bg: var(--tk-card); --bs-nav-tabs-link-active-border-color: var(--tk-border) var(--tk-border) var(--tk-card); --bs-code-color: var(--tk-cyan); --bs-kbd-bg: var(--tk-bg3); --bs-pre-color: var(--tk-text2); /* ── Override Bootstrap's auto-computed warning emphasis colours ── */ /* Bootstrap dark mode computes --bs-warning-text-emphasis as #726c00 */ /* (a muddy olive) — replace every warning text/bg/border variable */ /* with sky-blue shades that work on our dark navy background. */ --bs-warning: #38BDF8; --bs-warning-rgb: 56, 189, 248; --bs-warning-text-emphasis: #7DD3FC; --bs-warning-bg-subtle: rgba(56, 189, 248, .10); --bs-warning-border-subtle: rgba(56, 189, 248, .28); } /* Prevent white flash before CSS loads — paint html element dark immediately */ [data-bs-theme="dark"] html { background: var(--tk-bg); } /* Global font smoothing */ [data-bs-theme="dark"] body { font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; background: var(--tk-bg); color: var(--tk-text2); } /* Form controls */ [data-bs-theme="dark"] .form-control, [data-bs-theme="dark"] .form-select { background-color: var(--tk-bg3); border-color: var(--tk-border); color: var(--tk-text); } [data-bs-theme="dark"] .form-control:focus, [data-bs-theme="dark"] .form-select:focus { background-color: var(--tk-bg3); border-color: var(--tk-blue); color: var(--tk-text); box-shadow: 0 0 0 3px rgba(59, 130, 246, .18); } [data-bs-theme="dark"] .form-control::placeholder { color: var(--tk-muted); } [data-bs-theme="dark"] .form-control:disabled, [data-bs-theme="dark"] .form-select:disabled { background-color: rgba(12, 20, 38, .5); color: var(--tk-muted); } [data-bs-theme="dark"] .form-check-input { background-color: var(--tk-bg3); border-color: var(--tk-border); } [data-bs-theme="dark"] .form-check-input:checked { background-color: var(--tk-blue); border-color: var(--tk-blue); } [data-bs-theme="dark"] .form-text { color: var(--tk-muted); } [data-bs-theme="dark"] .form-label { color: var(--tk-text2); font-weight: 500; } [data-bs-theme="dark"] .input-group-text { background-color: var(--tk-bg3); border-color: var(--tk-border); color: var(--tk-muted); } /* Tables */ [data-bs-theme="dark"] .table { --bs-table-color: var(--tk-text2); } [data-bs-theme="dark"] .table th { color: var(--tk-muted); font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; } [data-bs-theme="dark"] .table td { color: var(--tk-text2); } [data-bs-theme="dark"] .table-light { --bs-table-bg: var(--tk-bg3) !important; --bs-table-color: var(--tk-muted); } [data-bs-theme="dark"] .table-hover > tbody > tr:hover > * { --bs-table-accent-bg: rgba(56, 189, 248, .06); color: var(--tk-text); } /* Alerts — toned down for dark bg */ [data-bs-theme="dark"] .alert-success { background: rgba(16,185,129,.12); border-color: rgba(16,185,129,.3); color: #6EE7B7; } [data-bs-theme="dark"] .alert-danger { background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.3); color: #FCA5A5; } [data-bs-theme="dark"] .alert-warning { background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.3); color: #FCD34D; } [data-bs-theme="dark"] .alert-info { background: rgba(56,189,248,.10); border-color: rgba(56,189,248,.28); color: #7DD3FC; } /* Badges — subtle dark versions */ [data-bs-theme="dark"] .badge.bg-success { background: rgba(16,185,129,.2) !important; color: #6EE7B7 !important; border: 1px solid rgba(16,185,129,.35); } [data-bs-theme="dark"] .badge.bg-danger { background: rgba(239,68,68,.2) !important; color: #FCA5A5 !important; border: 1px solid rgba(239,68,68,.35); } [data-bs-theme="dark"] .badge.bg-warning { background: rgba(245,158,11,.2) !important; color: #FCD34D !important; border: 1px solid rgba(245,158,11,.35); } [data-bs-theme="dark"] .badge.bg-info { background: rgba(56,189,248,.15) !important; color: #7DD3FC !important; border: 1px solid rgba(56,189,248,.3); } [data-bs-theme="dark"] .badge.bg-primary { background: rgba(59,130,246,.2) !important; color: #93C5FD !important; border: 1px solid rgba(59,130,246,.35); } [data-bs-theme="dark"] .badge.bg-secondary{ background: rgba(126,150,192,.15)!important; color: #94A3B8 !important; border: 1px solid rgba(126,150,192,.25); } [data-bs-theme="dark"] .badge.bg-light { background: var(--tk-bg3) !important; color: var(--tk-text2) !important; border: 1px solid var(--tk-border); } [data-bs-theme="dark"] .badge.text-dark { color: var(--tk-text2) !important; } /* Subtle Bootstrap badge variants used for status */ [data-bs-theme="dark"] .bg-success-subtle { background: rgba(16,185,129,.12) !important; } [data-bs-theme="dark"] .bg-danger-subtle { background: rgba(239,68,68,.12) !important; } [data-bs-theme="dark"] .bg-warning-subtle { background: rgba(245,158,11,.12) !important; } [data-bs-theme="dark"] .bg-info-subtle { background: rgba(56,189,248,.10) !important; } [data-bs-theme="dark"] .bg-primary-subtle { background: rgba(59,130,246,.12) !important; } [data-bs-theme="dark"] .text-success { color: #6EE7B7 !important; } [data-bs-theme="dark"] .text-danger { color: #FCA5A5 !important; } [data-bs-theme="dark"] .text-warning { color: #FCD34D !important; } [data-bs-theme="dark"] .text-info { color: #7DD3FC !important; } [data-bs-theme="dark"] .text-primary { color: var(--tk-sky) !important; } [data-bs-theme="dark"] .text-muted, [data-bs-theme="dark"] .text-secondary { color: var(--tk-muted) !important; } [data-bs-theme="dark"] .border-success-subtle { border-color: rgba(16,185,129,.3) !important; } [data-bs-theme="dark"] .border-danger-subtle { border-color: rgba(239,68,68,.3) !important; } [data-bs-theme="dark"] .border-warning-subtle { border-color: rgba(245,158,11,.3) !important; } [data-bs-theme="dark"] .border-primary-subtle { border-color: rgba(59,130,246,.3) !important; } /* Buttons */ [data-bs-theme="dark"] .btn-primary { background: var(--tk-grad); border: none; color: #fff; box-shadow: 0 0 20px rgba(59,130,246,.25); } [data-bs-theme="dark"] .btn-primary:hover, [data-bs-theme="dark"] .btn-primary:focus { background: linear-gradient(135deg, #2563EB 0%, #06B6D4 100%); box-shadow: 0 0 30px rgba(59,130,246,.4); border: none; color: #fff; } [data-bs-theme="dark"] .btn-outline-primary { color: var(--tk-sky); border-color: rgba(56,189,248,.4); } [data-bs-theme="dark"] .btn-outline-primary:hover { background: rgba(59,130,246,.15); color: var(--tk-sky); border-color: var(--tk-sky); } [data-bs-theme="dark"] .btn-outline-secondary { color: var(--tk-muted); border-color: var(--tk-border); } [data-bs-theme="dark"] .btn-outline-secondary:hover { background: rgba(126,150,192,.12); color: var(--tk-text2); border-color: var(--tk-border-glow); } [data-bs-theme="dark"] .btn-outline-danger { color: #FCA5A5; border-color: rgba(239,68,68,.4); } [data-bs-theme="dark"] .btn-outline-danger:hover { background: rgba(239,68,68,.15); color: #FCA5A5; } [data-bs-theme="dark"] .btn-outline-success { color: #6EE7B7; border-color: rgba(16,185,129,.4); } [data-bs-theme="dark"] .btn-outline-success:hover { background: rgba(16,185,129,.15); color: #6EE7B7; } [data-bs-theme="dark"] .btn-outline-warning { color: #FCD34D; border-color: rgba(245,158,11,.4); } [data-bs-theme="dark"] .btn-outline-warning:hover { background: rgba(245,158,11,.15); color: #FCD34D; } [data-bs-theme="dark"] .btn-danger { background: rgba(239,68,68,.9); border-color: transparent; } [data-bs-theme="dark"] .btn-success{ background: rgba(16,185,129,.9); border-color: transparent; } [data-bs-theme="dark"] .btn-warning{ background: rgba(245,158,11,.9); border-color: transparent; color: #111; } [data-bs-theme="dark"] .btn-light { background: var(--tk-bg3); border-color: var(--tk-border); color: var(--tk-text2); } [data-bs-theme="dark"] .btn-light:hover { background: var(--tk-card); color: var(--tk-text); border-color: var(--tk-border-glow); } /* Nav pills */ [data-bs-theme="dark"] .nav-pills .nav-link { color: var(--tk-muted); } [data-bs-theme="dark"] .nav-pills .nav-link:hover { color: var(--tk-text); background: rgba(56,189,248,.07); } [data-bs-theme="dark"] .nav-pills .nav-link.active { background: rgba(59,130,246,.2); color: var(--tk-sky); font-weight: 600; box-shadow: inset 0 0 0 1px rgba(59,130,246,.3); } /* Collapse / accordion */ [data-bs-theme="dark"] .card { background: var(--tk-card); border-color: var(--tk-border); } [data-bs-theme="dark"] .card-header { background: var(--tk-bg3); border-color: var(--tk-border); color: var(--tk-text); } [data-bs-theme="dark"] .card-body { color: var(--tk-text2); } [data-bs-theme="dark"] .card.border-danger { border-color: rgba(239,68,68,.35) !important; } [data-bs-theme="dark"] .card.bg-danger-subtle { background: rgba(239,68,68,.10) !important; } /* HR and borders */ [data-bs-theme="dark"] hr { border-color: var(--tk-border); opacity: 1; } [data-bs-theme="dark"] .border { border-color: var(--tk-border) !important; } [data-bs-theme="dark"] .border-warning { border-color: rgba(245,158,11,.4) !important; } [data-bs-theme="dark"] .border-danger { border-color: rgba(239,68,68,.4) !important; } [data-bs-theme="dark"] .border-success { border-color: rgba(16,185,129,.4) !important; } [data-bs-theme="dark"] .border-primary { border-color: rgba(59,130,246,.4) !important; } /* bg-light overrides */ [data-bs-theme="dark"] .bg-light { background: var(--tk-bg3) !important; } [data-bs-theme="dark"] .bg-white { background: var(--tk-card) !important; } [data-bs-theme="dark"] .bg-body { background: var(--tk-bg) !important; } /* Scrollbar */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: var(--tk-bg2); } ::-webkit-scrollbar-thumb { background: var(--tk-faint); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--tk-blue); } /* ========================================================================== Layout — Sidebar ========================================================================== */ .tokeno-sidebar { width: 240px; min-height: 100vh; background: var(--tk-bg3); border-right: 1px solid var(--tk-border); color: var(--tk-text); position: fixed; left: 0; top: 0; bottom: 0; display: flex; flex-direction: column; z-index: 100; } .sidebar-brand { display: flex; align-items: center; gap: 10px; padding: 20px 20px 14px; font-size: 1.05rem; font-weight: 800; letter-spacing: 0.02em; color: var(--tk-text); border-bottom: 1px solid var(--tk-border); margin-bottom: 10px; } .sidebar-brand-icon { font-size: 1.5rem; background: var(--tk-grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1; } .sidebar-role-badge { padding: 2px 16px 10px; } .sidebar-nav { flex: 1; padding: 4px 0; overflow-y: auto; } .sidebar-nav li { list-style: none; } .sidebar-nav li a { display: flex; align-items: center; gap: 10px; color: var(--tk-muted); padding: 9px 14px; margin: 1px 8px; border-radius: 8px; text-decoration: none; font-size: 0.875rem; font-weight: 500; transition: background 0.15s, color 0.15s; } .sidebar-nav li a i { font-size: 1rem; width: 18px; text-align: center; flex-shrink: 0; } .sidebar-nav li a:hover { background: rgba(56, 189, 248, .08); color: var(--tk-text); } .sidebar-nav li a.active { background: rgba(59, 130, 246, .18); color: var(--tk-sky); font-weight: 600; box-shadow: inset 3px 0 0 var(--tk-blue); } .sidebar-nav li a.disabled { opacity: 0.35; pointer-events: none; cursor: default; } .sidebar-divider { border-top: 1px solid var(--tk-border); margin: 8px 16px; } .sidebar-section-label { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(126, 150, 192, .45); padding: 10px 22px 4px; } .sidebar-footer { padding: 12px 16px 16px; border-top: 1px solid var(--tk-border); } .sidebar-user { display: flex; align-items: center; gap: 8px; color: var(--tk-muted); font-size: 0.78rem; margin-bottom: 10px; overflow: hidden; } .sidebar-user span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sidebar-logout { display: flex; align-items: center; gap: 8px; color: rgba(126, 150, 192, .55); font-size: 0.82rem; text-decoration: none; padding: 5px 0; transition: color 0.15s; } .sidebar-logout:hover { color: #FCA5A5; } /* ========================================================================== Layout — Main content ========================================================================== */ .tokeno-content { margin-left: 240px; min-height: 100vh; background: var(--tk-bg); display: flex; flex-direction: column; } .tokeno-topbar { background: var(--tk-bg2); border-bottom: 1px solid var(--tk-border); padding: 13px 28px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 50; backdrop-filter: blur(12px); } .topbar-title { font-size: 1rem; font-weight: 700; color: var(--tk-text); letter-spacing: -0.01em; } .tokeno-page-content { padding: 28px; flex: 1; } /* ========================================================================== Stat Cards ========================================================================== */ .stat-card { background: var(--tk-card); border: 1px solid var(--tk-border); border-radius: 12px; padding: 20px 22px; display: flex; align-items: center; gap: 16px; height: 100%; transition: border-color .2s, box-shadow .2s; } .stat-icon { width: 46px; height: 46px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; flex-shrink: 0; } .stat-icon.blue { background: rgba(59,130,246,.15); color: #93C5FD; } .stat-icon.green { background: rgba(16,185,129,.15); color: #6EE7B7; } .stat-icon.amber { background: rgba(245,158,11,.15); color: #FCD34D; } .stat-icon.red { background: rgba(239,68,68,.15); color: #FCA5A5; } .stat-icon.slate { background: rgba(126,150,192,.12); color: var(--tk-muted); } .stat-icon.purple { background: rgba(168,85,247,.15); color: #D8B4FE; } .stat-value { font-size: 1.9rem; font-weight: 800; color: var(--tk-text); line-height: 1; letter-spacing: -0.02em; } .stat-label { font-size: 0.78rem; color: var(--tk-muted); margin-top: 3px; font-weight: 500; } /* Clickable stat card */ a.stat-card { cursor: pointer; text-decoration: none; } a.stat-card:hover { border-color: var(--tk-border-glow); box-shadow: 0 4px 24px rgba(59,130,246,.12); background: rgba(15, 26, 48, .95); } a.stat-card .stat-value { color: var(--tk-text); } a.stat-card .stat-label { color: var(--tk-muted); } /* ========================================================================== Section Cards ========================================================================== */ .section-card { background: var(--tk-card); border: 1px solid var(--tk-border); border-radius: 12px; margin-bottom: 24px; overflow: hidden; transition: border-color .2s; } .section-card:hover { border-color: rgba(99,141,220,.28); } .section-card-header { padding: 14px 20px; border-bottom: 1px solid var(--tk-border); display: flex; align-items: center; gap: 10px; background: var(--tk-bg3); } .section-card-title { font-size: 0.9rem; font-weight: 700; color: var(--tk-text); margin: 0; letter-spacing: -0.01em; } .section-card-body { padding: 20px; } /* ========================================================================== File viewer / code blocks ========================================================================== */ .file-viewer { background: #010409; color: #ABB2BF; border: 1px solid var(--tk-border); border-radius: 10px; padding: 20px 24px; font-family: 'JetBrains Mono', 'Cascadia Code', 'Fira Code', 'Consolas', monospace; font-size: 0.8rem; line-height: 1.65; overflow-x: auto; max-height: 540px; overflow-y: auto; white-space: pre; margin: 0; } .file-ok { color: #6EE7B7; font-weight: 600; } .file-missing { color: #FCA5A5; font-weight: 600; } .path-label { font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; color: var(--tk-muted); } /* ========================================================================== Login / Auth pages ========================================================================== */ .login-wrap { min-height: 100vh; background: var(--tk-bg); background-image: linear-gradient(rgba(56,189,248,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(56,189,248,.04) 1px, transparent 1px); background-size: 48px 48px; display: flex; align-items: center; justify-content: center; position: relative; } /* faint glow orb behind login card */ .login-wrap::before { content: ''; position: absolute; width: 500px; height: 500px; background: radial-gradient(circle, rgba(59,130,246,.08) 0%, transparent 70%); border-radius: 50%; pointer-events: none; } .login-card { background: var(--tk-card); border: 1px solid var(--tk-border); border-radius: 18px; padding: 40px 44px; width: 100%; max-width: 400px; box-shadow: 0 24px 64px rgba(0, 0, 0, .45), 0 0 40px rgba(59,130,246,.06); position: relative; } /* subtle top highlight line on login card */ .login-card::before { content: ''; position: absolute; top: 0; left: 20%; right: 20%; height: 1px; background: var(--tk-grad); border-radius: 1px; opacity: .6; } .login-logo { font-size: 2.2rem; background: var(--tk-grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 6px; display: block; } .login-title { font-size: 1.25rem; font-weight: 800; color: var(--tk-text); letter-spacing: -0.02em; } .login-subtitle { font-size: 0.83rem; color: var(--tk-muted); margin-bottom: 26px; } /* ========================================================================== Onboarding card + step indicator ========================================================================== */ .onboard-card { background: var(--tk-card); border: 1px solid var(--tk-border); border-radius: 18px; padding: 40px 44px; width: 100%; max-width: 480px; box-shadow: 0 24px 64px rgba(0, 0, 0, .45); } .step-indicator { display: flex; align-items: center; justify-content: center; } .step { display: flex; flex-direction: column; align-items: center; gap: 4px; } .step-num { width: 32px; height: 32px; border-radius: 50%; background: var(--tk-bg3); border: 1px solid var(--tk-border); color: var(--tk-muted); display: flex; align-items: center; justify-content: center; font-size: 0.85rem; font-weight: 700; } .step.active .step-num { background: var(--tk-grad); border: none; color: #fff; box-shadow: 0 0 16px rgba(59,130,246,.4); } .step.done .step-num { background: rgba(16,185,129,.2); border-color: rgba(16,185,129,.4); color: #6EE7B7; } .step-label { font-size: 0.72rem; color: var(--tk-muted); } .step.active .step-label, .step.done .step-label { color: var(--tk-text2); } .step-line { flex: 1; height: 1px; background: var(--tk-border); margin: 0 8px 18px; min-width: 40px; } /* ========================================================================== Audit event badges ========================================================================== */ .audit-action { font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; background: var(--tk-bg3); border: 1px solid var(--tk-border); border-radius: 5px; padding: 2px 8px; color: var(--tk-muted); } .audit-action.auth { background: rgba(59,130,246,.12); border-color: rgba(59,130,246,.3); color: #93C5FD; } .audit-action.token { background: rgba(16,185,129,.12); border-color: rgba(16,185,129,.3); color: #6EE7B7; } .audit-action.secret { background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.3); color: #FCD34D; } /* ========================================================================== Token status badges ========================================================================== */ .badge-active { background: rgba(16,185,129,.15); color: #6EE7B7; border: 1px solid rgba(16,185,129,.3); } .badge-expiring { background: rgba(245,158,11,.15); color: #FCD34D; border: 1px solid rgba(245,158,11,.3); } .badge-expired { background: rgba(126,150,192,.10);color: var(--tk-muted); border: 1px solid var(--tk-border); } .badge-revoked { background: rgba(239,68,68,.15); color: #FCA5A5; border: 1px solid rgba(239,68,68,.3); } .badge-pending { background: rgba(59,130,246,.15); color: #93C5FD; border: 1px solid rgba(59,130,246,.3); } /* ========================================================================== Hover / utility helpers ========================================================================== */ .hover-shadow:hover { box-shadow: 0 8px 28px rgba(0,0,0,.35); }