/* ==========================================================================
   KNOWN SYSTEMS GLOBAL BRAND DESIGN LAYOUT
   Adheres strictly to the Warm Ombré / Charcoal Glass Realism specifications
   ========================================================================== */

:root {
    /* Precise color metrics sampled from workspace screenshots */
    --bg-warm-gradient: radial-gradient(circle at top right, #fcfbfa 0%, #f4f1e9 45%, #eae6dc 100%);
    
    --color-slate-primary: #1e2229;   /* Crisp, deep editorial charcoal text */
    --color-slate-muted: #5c626d;     /* High-visibility body text */
    --color-hud-mono: #4b525d;        /* Technical tracking identifiers color */
    --color-accent-rose: #d69e90;     /* Indicator token color line */
    
    /* High-Contrast Technical Terminal/Black Box Elements */
    --terminal-dark-bg: #000000;
}

/* --- DOCUMENT DEFAULTS --- */
html, body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    background: var(--bg-warm-gradient) !important;
    color: var(--color-slate-primary) !important;
    font-family: 'Plus Jakarta Sans', sans-serif;
    -webkit-font-smoothing: antialiased;
    letter-spacing: -0.01em;
}

/* --- SYSTEM NAVIGATION LINKS & CRUMB LAYOUTS --- */
.back-link,
header a:not(.screenshot-nav-pill a) {
    font-family: 'Share Tech Mono', monospace;
    font-size: 11px;
    color: var(--color-slate-muted) !important;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    text-decoration: none;
    transition: color 0.25s ease;
}

.back-link:hover {
    color: var(--color-slate-primary) !important;
}

/* --- THE PILL BAR RE-STYLING (Black fill, white text) --- */
.screenshot-nav-pill {
    background: #000000 !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
}

.screenshot-nav-pill a {
    color: #ffffff !important;
    font-weight: 500;
}

.screenshot-nav-pill a:hover {
    color: var(--color-accent-rose) !important;
}

/* --- EDITORIAL TYPOGRAPHY MATRICES --- */
h1, h2, h3, .editorial-title {
    font-family: 'Playfair Display', serif !important;
    color: var(--color-slate-primary) !important;
    font-weight: 400;
    margin-top: 0;
}

p, .body-text-muted {
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: var(--color-slate-muted) !important;
    font-size: 14px;
    line-height: 1.65;
    font-weight: 400;
}

/* Technical Upper Subheadings */
.section-thesis-tracker,
.font-mono-hud {
    font-family: 'Share Tech Mono', monospace !important;
    font-size: 10px;
    font-weight: 500;
    color: var(--color-hud-mono) !important;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    display: block;
}

.kinetic-panel,
.founder-profile-card,
.philosophy-thesis-card,
.form-staging-housing,
.glass-card,
.glass-container,
.glass-panel {
    background: rgba(0, 0, 0, 0.15) !important; /* Default 15% opacity */
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 28px !important;
    box-shadow: 
        0 20px 40px rgba(0, 0, 0, 0.25) !important;
    padding: 2rem;
    color: #1e2229 !important; /* Default dark text for translucent panels */
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.kinetic-panel:hover,
.glass-panel:hover,
.glass-card:hover {
    background: rgba(0, 0, 0, 0.25) !important;
}

/* Explicit Opacity Modifier Classes */
.panel-solid {
    background: rgba(0, 0, 0, 1.0) !important; /* 100% opacity */
    color: #f4f0e6 !important; /* White text for solid panels */
}

.panel-translucent {
    background: rgba(0, 0, 0, 0.15) !important; /* 15% opacity */
    color: #1e2229 !important; /* Black text for translucent panels */
}

/* --- HEADINGS COLOR GATING BY OPACITY --- */
/* Solid panels get white headings */
.panel-solid h1, .panel-solid h2, .panel-solid h3, .panel-solid h4, .panel-solid .editorial-title,
.panel-solid span, .panel-solid label, .panel-solid .font-mono-hud {
    color: #ffffff !important;
}

/* Translucent panels get dark headings */
.kinetic-panel:not(.panel-solid) h1, .kinetic-panel:not(.panel-solid) h2, .kinetic-panel:not(.panel-solid) h3, .kinetic-panel:not(.panel-solid) h4,
.founder-profile-card:not(.panel-solid) h1, .founder-profile-card:not(.panel-solid) h2, .founder-profile-card:not(.panel-solid) h3,
.philosophy-thesis-card:not(.panel-solid) h1, .philosophy-thesis-card:not(.panel-solid) h2, .philosophy-thesis-card:not(.panel-solid) h3,
.glass-card:not(.panel-solid) h1, .glass-card:not(.panel-solid) h2, .glass-card:not(.panel-solid) h3,
.glass-container:not(.panel-solid) h1, .glass-container:not(.panel-solid) h2, .glass-container:not(.panel-solid) h3,
.glass-panel:not(.panel-solid) h1, .glass-panel:not(.panel-solid) h2, .glass-panel:not(.panel-solid) h3, .glass-panel:not(.panel-solid) h4,
.glass-card:not(.panel-solid) .editorial-title, .glass-container:not(.panel-solid) .editorial-title,
.panel-translucent h1, .panel-translucent h2, .panel-translucent h3, .panel-translucent h4, .panel-translucent .editorial-title,
.kinetic-panel:not(.panel-solid) span, .kinetic-panel:not(.panel-solid) label, .kinetic-panel:not(.panel-solid) .font-mono-hud,
.panel-translucent span, .panel-translucent label, .panel-translucent .font-mono-hud {
    color: #1e2229 !important;
}

/* --- PARAGRAPHS COLOR GATING BY OPACITY --- */
/* Solid panels get muted light paragraph text */
.panel-solid p, .panel-solid .text-muted, .panel-solid .text-taupe, .panel-solid li {
    color: #918b81 !important;
}

/* Translucent panels get muted dark paragraph text */
.kinetic-panel:not(.panel-solid) p, .kinetic-panel:not(.panel-solid) .text-muted, .kinetic-panel:not(.panel-solid) .text-taupe, .kinetic-panel:not(.panel-solid) li,
.founder-profile-card:not(.panel-solid) p, .founder-profile-card:not(.panel-solid) .text-muted, .founder-profile-card:not(.panel-solid) li,
.philosophy-thesis-card:not(.panel-solid) p, .philosophy-thesis-card:not(.panel-solid) .text-muted, .philosophy-thesis-card:not(.panel-solid) li,
.glass-card:not(.panel-solid) p, .glass-card:not(.panel-solid) .text-muted, .glass-card:not(.panel-solid) .text-taupe, .glass-card:not(.panel-solid) li,
.glass-container:not(.panel-solid) p, .glass-container:not(.panel-solid) .text-muted, .glass-container:not(.panel-solid) .text-taupe, .glass-container:not(.panel-solid) li,
.glass-panel:not(.panel-solid) p, .glass-panel:not(.panel-solid) .text-muted, .glass-panel:not(.panel-solid) .text-taupe, .glass-panel:not(.panel-solid) li,
.panel-translucent p, .panel-translucent .text-muted, .panel-translucent .text-taupe, .panel-translucent li {
    color: #4b525d !important;
}

/* --- FORM LAYER INTERFACES --- */
label, .form-label-mono {
    font-family: 'Share Tech Mono', monospace;
    font-size: 9px;
    color: #918b81 !important;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    display: block;
    margin-bottom: 0.5rem;
}

input[type="text"],
input[type="email"],
select,
textarea {
    width: 100%;
    background-color: #0b0c10 !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 12px !important;
    padding: 14px 16px !important;
    font-family: 'Share Tech Mono', monospace !important;
    font-size: 12px !important;
    color: #f4f0e6 !important;
    outline: none;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4);
    transition: border-color 0.25s ease;
}

input:focus, select:focus, textarea:focus {
    border-color: rgba(214, 158, 144, 0.6) !important;
}

/* Form Selector Layout Arrow Adjustments */
select {
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' h='10' viewBox='0 0 24 24' fill='none' stroke='%23f4f0e6' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 40px !important;
}

/* Solid Execution Processing Button Elements */
.btn-submit-ledger,
button[type="submit"],
input[type="submit"] {
    width: 100%;
    background: #121417 !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 100px !important; /* Oval form button profile */
    font-family: 'Share Tech Mono', monospace !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    padding: 16px 0 !important;
    cursor: pointer;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    transition: background-color 0.25s ease, transform 0.25s ease;
}

.btn-submit-ledger:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
    background-color: #1c1e24 !important;
    border-color: rgba(214, 158, 144, 0.4) !important;
    transform: translateY(-1px);
}

/* Ensure the inner description boxes have black text and stay readable */
.kinetic-panel .bg-neutral-950\/50,
.kinetic-panel .bg-neutral-950\/60,
.kinetic-panel div[class*="bg-neutral-950"],
#problems div[class*="bg-neutral-950"],
#sector-explorer div[class*="bg-neutral-950"],
.bg-neutral-950 {
    background-color: rgba(255, 255, 255, 0.95) !important;
    color: #000000 !important;
    border-color: rgba(0, 0, 0, 0.15) !important;
}

.kinetic-panel .bg-neutral-950\/50 span,
.kinetic-panel .bg-neutral-950\/60 span,
.kinetic-panel div[class*="bg-neutral-950"] span,
.kinetic-panel .bg-neutral-950\/50 p,
.kinetic-panel .bg-neutral-950\/60 p,
.kinetic-panel div[class*="bg-neutral-950"] p,
#problems div[class*="bg-neutral-950"] span,
#problems div[class*="bg-neutral-950"] p,
#sector-explorer div[class*="bg-neutral-950"] span,
#sector-explorer div[class*="bg-neutral-950"] p {
    color: #000000 !important;
}

/* Ensure hover does not change text colors */
.kinetic-panel:hover,
.kinetic-panel:hover *,
.glass-panel:hover,
.glass-panel:hover *,
.glass-card:hover,
.glass-card:hover * {
    color: inherit;
}