/* ═══════════════════════════════════════════════════════════════════
   GST INTEL HUB — UNIFIED DESIGN SYSTEM
   Fonts  : Cinzel (luxury headings) + Inter (body/data/UI)
   Theme  : Obsidian / Gold (#D4AF37) glassmorphism
   ═══════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700&family=Inter:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Roboto+Mono:wght@400;500&display=swap');

:root {
    --obsidian:       #0A0A0B;
    --slate-900:      #0F172A;
    --gold-primary:   #D4AF37;
    --gold-secondary: #B8860B;
    --gold-muted:     #a88c2a;
    --gold-glow:      rgba(212, 175, 55, 0.25);
    --glass:          rgba(15, 23, 42, 0.70);
}

/* ── BASE ─────────────────────────────────────────────────────────── */
body {
    background-color: var(--obsidian);
    color: #FFFFFF;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px;
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ── TYPOGRAPHY HIERARCHY ─────────────────────────────────────────── */
/* Cinzel for all luxury headings — single source of truth            */
.luxury-font,
h1.luxury-font,
h2.luxury-font {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    letter-spacing: 0.04em;
}

/* Page section labels & data labels use Inter bold */
h3, h4 { font-family: 'Inter', sans-serif; font-weight: 700; }

/* Body copy, table cells, notes */
p, td, li, span, input, select, textarea {
    font-family: 'Inter', sans-serif;
}

/* Monospace for amounts, refs, codes */
.font-mono { font-family: 'Roboto Mono', Consolas, 'Courier New', monospace; font-variant-numeric: tabular-nums; }

/* ── GOLD TEXT — flat authoritative gold, works everywhere ────────── */
/* Replaces the old gradient that broke inside Tailwind utility classes */
.gold-text {
    color: var(--gold-primary) !important;
    font-weight: 700;
}

/* ── GLASSMORPHISM CARDS ──────────────────────────────────────────── */
.glass-card {
    background: var(--glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(212, 175, 55, 0.12);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.75);
    border-radius: 1.25rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.glass-card:hover {
    border-color: rgba(212, 175, 55, 0.35);
    box-shadow: 0 0 22px var(--gold-glow);
}

/* ── OBSIDIAN BACKGROUND ──────────────────────────────────────────── */
.bg-obsidian { background-color: var(--obsidian); }

/* ── PREMIUM BUTTONS ──────────────────────────────────────────────── */
.btn-gold {
    background: linear-gradient(45deg, var(--gold-secondary), var(--gold-primary));
    color: #000;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 11px;
    transition: all 0.25s ease;
    box-shadow: 0 4px 15px var(--gold-glow);
}
.btn-gold:hover {
    filter: brightness(1.12);
    box-shadow: 0 6px 22px var(--gold-glow);
    transform: translateY(-1px);
}

/* ── ANIMATE FADE IN ──────────────────────────────────────────────── */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.animate-fade-in { animation: fadeIn 0.35s ease forwards; }

/* ── FORM ELEMENTS — explicit dark theme (fixes white-on-white bug) ── */
/* Browsers set input/select backgrounds to white by default; body      */
/* inherits color:#FFF from our theme → invisible text. Fix explicitly. */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
select,
textarea {
    background-color: #0d1425;          /* deep obsidian — never white   */
    color: #e2e8f0;                     /* slate-200 — always readable   */
    border: 1px solid #1e293b;          /* slate-800                     */
    font-family: 'Inter', sans-serif;
    font-size: 13px;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--gold-primary);
    box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.12);
    color: #f1f5f9;                     /* slightly brighter on focus    */
}

/* Placeholder text — must be visible but muted */
::placeholder { color: #475569; opacity: 1; }    /* slate-600 */
::-ms-input-placeholder { color: #475569; }

/* Windows/macOS dropdown option background — force dark */
option {
    background-color: #0d1425;
    color: #e2e8f0;
}
option:checked,
option:hover {
    background-color: #1e293b;
    color: var(--gold-primary);
}

/* When an input already has Tailwind bg- classes, don't override them — */
/* but still fix the text color so it's readable.                        */
/* gold-text class uses !important so it wins over the rule above.       */

/* File input button styling */
input[type="file"]::file-selector-button {
    background: #1e293b;
    color: #e2e8f0;
    border: 1px solid #334155;
    padding: 6px 14px;
    border-radius: 8px;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    transition: background 0.2s;
}
input[type="file"]::file-selector-button:hover {
    background: #334155;
    border-color: var(--gold-muted);
    color: var(--gold-primary);
}

/* Range / progress inputs */
input[type="range"] { accent-color: var(--gold-primary); }

/* Checkbox & radio — gold accent */
input[type="checkbox"],
input[type="radio"]  { accent-color: var(--gold-primary); }

/* ── STATUS BADGE HELPERS ─────────────────────────────────────────── */
/* Prevents any status badge from being invisible due to color inherit  */
.badge { display: inline-block; font-size: 10px; font-weight: 700;
         letter-spacing: 0.05em; text-transform: uppercase;
         padding: 3px 10px; border-radius: 999px; }

/* ── DRAFTER PAPER EDITOR — white canvas override ─────────────────── */
/* drafter.html uses a white paper div; the textarea inside must be     */
/* black text not white (it has bg-white text-gray-800 inline anyway)  */
#editor { background: transparent !important; color: #1a202c !important; }

/* ── TABLE CELL TEXT — ensure readability in dark tables ─────────────*/
td, th { color: inherit; }

/* ── CUSTOM SCROLLBAR ─────────────────────────────────────────────── */
::-webkit-scrollbar       { width: 5px; }
::-webkit-scrollbar-track { background: var(--obsidian); }
::-webkit-scrollbar-thumb { background: var(--gold-muted); border-radius: 10px; }