/* ============================================================
   VENTRILOC THEME — "Editorial data observatory on warm paper".
   Canvas white, warm-gray surfaces, sharp-cornered buttons,
   asymmetric-feel cards, a single orange ember accent. Flat,
   shadowless. PolySans (headings) + Inter (body/UI). Scoped
   under html[data-theme="ventriloc"]; loaded AFTER style.css.
   Also defines the "PolySans (Ventriloc)" font stack.
   ============================================================ */

/* ------------------------------------------------------------
   1) TOKENS -> app variables
   ------------------------------------------------------------ */
html[data-theme="ventriloc"] {
    --primary: #202020;          /* Graphite — filled action (CTA) */
    --primary-dark: #000000;
    --primary-light: #4d4d4d;
    --primary-50: #f5f5f5;       /* Fog */
    --primary-100: #efefef;      /* Ash */
    --primary-200: #e8e8e8;      /* Mist */
    --primary-300: #d8d8d8;
    --primary-600: #202020;
    --primary-700: #202020;
    --primary-800: #202020;      /* headings -> Graphite */
    --primary-900: #202020;

    --secondary: #4d4d4d;        /* Steel */

    /* Neutralized semantics (Ember/Brass + warm grays only) */
    --success: #4d4d4d;
    --success-light: #efefef;
    --warning: #816729;          /* Brass */
    --warning-light: #ebe6dd;
    --danger: #202020;
    --danger-light: #efefef;
    --info: #828282;

    --bg-body: #ffffff;          /* Canvas White */
    --bg-card: #efefef;          /* Ash */
    --bg-nav: #ffffff;

    --text-primary: #202020;     /* Graphite */
    --text-secondary: #4d4d4d;   /* Steel */
    --text-muted: #828282;       /* Slate */

    --border-color: #e8e8e8;     /* Mist */
    --border-radius: 8px;

    /* Flat — hairline outlines instead of elevation */
    --shadow-xs: 0 0 0 1px #e8e8e8;
    --shadow-sm: 0 0 0 1px #e8e8e8;
    --shadow-md: 0 0 0 1px #e8e8e8;
    --shadow-lg: 0 0 0 1px #e8e8e8;
    --shadow-card: 0 0 0 1px #e8e8e8;
    --shadow-hover: 0 0 0 1px #d8d8d8;

    --bs-primary: #202020;
    --bs-primary-rgb: 32, 32, 32;

    --ember-orange: #ff682c;
    --brass: #816729;

    --font-family: 'Inter', system-ui, Roboto, sans-serif;
}

/* Explicit font choice: "PolySans (Ventriloc)" */
[data-font="polysans"] {
    --font-family: 'PolySans', 'Inter Tight', 'Space Grotesk', system-ui, sans-serif;
}

/* ------------------------------------------------------------
   2) Typography — PolySans headings (w400, -0.02em) + Inter body
   ------------------------------------------------------------ */
html[data-theme="ventriloc"] h1, html[data-theme="ventriloc"] h2,
html[data-theme="ventriloc"] h3, html[data-theme="ventriloc"] h4,
html[data-theme="ventriloc"] h5, html[data-theme="ventriloc"] h6,
html[data-theme="ventriloc"] .card-title,
html[data-theme="ventriloc"] .display-1, html[data-theme="ventriloc"] .display-2,
html[data-theme="ventriloc"] .display-3, html[data-theme="ventriloc"] .display-4,
html[data-theme="ventriloc"] .display-5, html[data-theme="ventriloc"] .display-6 {
    font-family: 'PolySans', 'Inter Tight', 'Space Grotesk', system-ui, sans-serif;
    font-weight: 400;
    letter-spacing: -0.02em;
    color: #202020 !important;
}

/* ------------------------------------------------------------
   3) Navbar — white bar, graphite labels, hairline edge
   ------------------------------------------------------------ */
html[data-theme="ventriloc"] .navbar {
    background: #ffffff;
    border-bottom: 1px solid #e8e8e8;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
html[data-theme="ventriloc"] .navbar .nav-link,
html[data-theme="ventriloc"] .navbar .dropdown-toggle,
html[data-theme="ventriloc"] .navbar .navbar-brand,
html[data-theme="ventriloc"] .navbar .navbar-brand span {
    color: #202020 !important;
    -webkit-text-fill-color: #202020 !important;
}
html[data-theme="ventriloc"] .navbar-brand i { color: #202020; filter: none; }
html[data-theme="ventriloc"] .navbar .nav-link:hover {
    background: #efefef; color: #202020 !important; border-radius: 200px;
}
html[data-theme="ventriloc"] .navbar .nav-link.active,
html[data-theme="ventriloc"] .navbar .nav-item.active .nav-link {
    background: #efefef; color: #202020 !important; border-radius: 200px;
}
html[data-theme="ventriloc"] .navbar-toggler { border-color: rgba(0, 0, 0, 0.2) !important; }
html[data-theme="ventriloc"] .navbar-toggler-icon { filter: invert(1) grayscale(1); }

/* ------------------------------------------------------------
   4) Dropdown menus — light paper
   ------------------------------------------------------------ */
html[data-theme="ventriloc"] .dropdown-menu,
html[data-theme="ventriloc"] .dropdown-menu-dark {
    background: #ffffff;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    box-shadow: none;
}
html[data-theme="ventriloc"] .dropdown-menu-dark .dropdown-item,
html[data-theme="ventriloc"] .dropdown-menu .dropdown-item { color: #202020; }
html[data-theme="ventriloc"] .dropdown-menu-dark .dropdown-item:hover,
html[data-theme="ventriloc"] .dropdown-menu .dropdown-item:hover { background: #efefef; color: #202020; }
html[data-theme="ventriloc"] .dropdown-menu-dark .dropdown-divider,
html[data-theme="ventriloc"] .dropdown-menu .dropdown-divider { border-color: #e8e8e8; }
html[data-theme="ventriloc"] .dropdown-menu-dark .dropdown-item-text { color: #828282; }

/* ------------------------------------------------------------
   5) Cards — flat 8px, Mist hairline
   ------------------------------------------------------------ */
html[data-theme="ventriloc"] .card {
    border-radius: 8px;
    box-shadow: 0 0 0 1px #e8e8e8;
    border-color: transparent;
}
html[data-theme="ventriloc"] .card:hover {
    box-shadow: 0 0 0 1px #d8d8d8;
    transform: none;
    border-color: transparent;
}
html[data-theme="ventriloc"] .card-header,
html[data-theme="ventriloc"] .card-footer {
    background: #f5f5f5;
    border-color: #e8e8e8;
}
html[data-theme="ventriloc"] .card-header {
    border-top-left-radius: 8px; border-top-right-radius: 8px;
}
html[data-theme="ventriloc"] .card-footer {
    border-bottom-left-radius: 8px; border-bottom-right-radius: 8px;
}

/* ------------------------------------------------------------
   6) Buttons — sharp 0px corners, flat graphite
   ------------------------------------------------------------ */
html[data-theme="ventriloc"] .btn { border-radius: 0; }
html[data-theme="ventriloc"] .btn-primary {
    background: #202020 !important; border: none !important;
    color: #ffffff !important; box-shadow: none !important;
}
html[data-theme="ventriloc"] .btn-primary:hover,
html[data-theme="ventriloc"] .btn-primary:active {
    background: #000000 !important; box-shadow: none !important;
    transform: none !important; color: #ffffff !important;
}
html[data-theme="ventriloc"] .btn-outline-primary {
    border: 1px solid #202020 !important; color: #202020 !important;
    background: transparent !important; box-shadow: none !important;
}
html[data-theme="ventriloc"] .btn-outline-primary:hover {
    background: #202020 !important; color: #ffffff !important;
    transform: none !important; box-shadow: none !important;
}
html[data-theme="ventriloc"] .btn-outline-secondary {
    border: 1px solid #828282 !important; color: #4d4d4d !important; box-shadow: none !important;
}
html[data-theme="ventriloc"] .btn-outline-secondary:hover {
    border-color: #202020 !important; color: #202020 !important; background: #efefef !important;
}
html[data-theme="ventriloc"] .btn-success,
html[data-theme="ventriloc"] .btn-danger,
html[data-theme="ventriloc"] .btn-warning,
html[data-theme="ventriloc"] .btn-info {
    background: #4d4d4d !important; border: none !important;
    color: #ffffff !important; box-shadow: none !important;
}
html[data-theme="ventriloc"] .btn-link { color: #202020 !important; }

/* ------------------------------------------------------------
   7) Forms — 8px corners, mist hairline, graphite focus
   ------------------------------------------------------------ */
html[data-theme="ventriloc"] .form-control,
html[data-theme="ventriloc"] .form-select {
    border: 1px solid #e8e8e8 !important;
    border-radius: 8px !important;
    background: #ffffff !important;
}
html[data-theme="ventriloc"] .form-control:focus,
html[data-theme="ventriloc"] .form-select:focus {
    border-color: #202020 !important;
    box-shadow: 0 0 0 3px rgba(32, 32, 32, 0.12) !important;
}
html[data-theme="ventriloc"] .input-group-text {
    border: 1px solid #e8e8e8 !important;
    border-radius: 8px !important;
    background: #efefef !important;
    color: #202020 !important;
}
html[data-theme="ventriloc"] input,
html[data-theme="ventriloc"] select,
html[data-theme="ventriloc"] textarea {
    color: #202020 !important; -webkit-text-fill-color: #202020 !important;
}
html[data-theme="ventriloc"] .form-check-input:checked { background-color: #202020; border-color: #202020; }
html[data-theme="ventriloc"] .form-check-input:focus { border-color: #202020; box-shadow: 0 0 0 0.2rem rgba(32, 32, 32, 0.15); }

/* ------------------------------------------------------------
   8) Tables — Graphite text, Ash header band
   ------------------------------------------------------------ */
html[data-theme="ventriloc"] table, html[data-theme="ventriloc"] thead,
html[data-theme="ventriloc"] tbody, html[data-theme="ventriloc"] tfoot,
html[data-theme="ventriloc"] tr, html[data-theme="ventriloc"] td,
html[data-theme="ventriloc"] th {
    color: #202020 !important; -webkit-text-fill-color: #202020 !important;
}
html[data-theme="ventriloc"] .table-modern thead th { background: #efefef; color: #202020 !important; }
html[data-theme="ventriloc"] .table-modern tbody tr:hover { background: #f5f5f5; }

/* ------------------------------------------------------------
   9) Bootstrap utility accents -> Graphite
   ------------------------------------------------------------ */
html[data-theme="ventriloc"] .text-primary { color: #202020 !important; -webkit-text-fill-color: #202020 !important; }
html[data-theme="ventriloc"] .link-primary { color: #202020 !important; }
html[data-theme="ventriloc"] .bg-primary { background-color: #202020 !important; }
html[data-theme="ventriloc"] .bg-primary-subtle { background-color: #efefef !important; }
html[data-theme="ventriloc"] .border-primary { border-color: #202020 !important; }
html[data-theme="ventriloc"] .progress-bar { background-color: #202020 !important; background-image: none !important; }
html[data-theme="ventriloc"] .page-link { color: #202020; border-color: #e8e8e8; }
html[data-theme="ventriloc"] .page-item.active .page-link { background-color: #202020; border-color: #202020; color: #fff; }
html[data-theme="ventriloc"] .nav-pills .nav-link.active { background-color: #efefef; color: #202020; border-radius: 200px; }
html[data-theme="ventriloc"] .nav-tabs .nav-link.active { color: #202020; }
html[data-theme="ventriloc"] .list-group-item.active { background-color: #202020; border-color: #202020; color: #fff; }
html[data-theme="ventriloc"] .badge.bg-primary { background-color: #202020 !important; }

/* Ember accent — links get an orange underline on hover only */
html[data-theme="ventriloc"] a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.window-btn):not(.navbar-brand):not(.list-group-item):hover {
    text-decoration: underline;
    text-decoration-color: var(--ember-orange);
    text-underline-offset: 2px;
}

/* ------------------------------------------------------------
   10) Metric / score / window controls
   ------------------------------------------------------------ */
html[data-theme="ventriloc"] .metric-card { border-radius: 8px; }
html[data-theme="ventriloc"] .metric-card .metric-value { color: #202020 !important; }
html[data-theme="ventriloc"] .score-value {
    background-image: none !important;
    color: #202020 !important;
    -webkit-text-fill-color: #202020 !important;
}
html[data-theme="ventriloc"] .window-btn { border-radius: 0; color: #202020 !important; }
html[data-theme="ventriloc"] .window-btn:hover { background: #efefef; color: #202020 !important; }
html[data-theme="ventriloc"] .window-btn.active { background: #202020; color: #ffffff !important; box-shadow: none; }

/* ------------------------------------------------------------
   11) Profile header — Ash editorial panel
   ------------------------------------------------------------ */
html[data-theme="ventriloc"] .profile-header {
    background: #efefef;
    color: #202020;
    border-radius: 8px;
    box-shadow: 0 0 0 1px #e8e8e8;
}
html[data-theme="ventriloc"] .profile-header::before { display: none; }

/* ------------------------------------------------------------
   12) Login / register — canvas white, ash card
   ------------------------------------------------------------ */
html[data-theme="ventriloc"] .login-page { background: #ffffff; }
html[data-theme="ventriloc"] .login-page::before,
html[data-theme="ventriloc"] .login-page::after { display: none; }
html[data-theme="ventriloc"] .login-card {
    background: #ffffff; border-radius: 8px; box-shadow: 0 0 0 1px #e8e8e8;
}
html[data-theme="ventriloc"] .login-brand i { color: #202020; }
html[data-theme="ventriloc"] .login-brand h2 { color: #202020; }
html[data-theme="ventriloc"] .login-card .input-group-text {
    background: #efefef; color: #202020; border-color: #e8e8e8;
}
html[data-theme="ventriloc"] .login-card .form-control:focus,
html[data-theme="ventriloc"] .login-card .input-group:focus-within .input-group-text {
    border-color: #202020; box-shadow: 0 0 0 0.2rem rgba(32, 32, 32, 0.12);
}

/* ------------------------------------------------------------
   13) Neutralized semantics (profit/loss, status, alerts)
   ------------------------------------------------------------ */
html[data-theme="ventriloc"] .text-profit { color: #202020 !important; -webkit-text-fill-color: #202020 !important; }
html[data-theme="ventriloc"] .text-loss { color: #828282 !important; -webkit-text-fill-color: #828282 !important; }
html[data-theme="ventriloc"] .text-success,
html[data-theme="ventriloc"] .text-danger { color: #4d4d4d !important; -webkit-text-fill-color: #4d4d4d !important; }
html[data-theme="ventriloc"] .text-warning { color: #816729 !important; -webkit-text-fill-color: #816729 !important; }
html[data-theme="ventriloc"] .text-info { color: #828282 !important; -webkit-text-fill-color: #828282 !important; }
html[data-theme="ventriloc"] .alert-success,
html[data-theme="ventriloc"] .alert-danger,
html[data-theme="ventriloc"] .alert-info { background: #efefef !important; color: #202020 !important; }
html[data-theme="ventriloc"] .alert-warning { background: #ebe6dd !important; color: #816729 !important; }
html[data-theme="ventriloc"] .badge.bg-success,
html[data-theme="ventriloc"] .badge.bg-danger,
html[data-theme="ventriloc"] .badge.bg-info { background: #4d4d4d !important; color: #ffffff !important; }
html[data-theme="ventriloc"] .badge.bg-warning { background: #816729 !important; color: #ffffff !important; }

/* ------------------------------------------------------------
   14) Misc surfaces + theme preview
   ------------------------------------------------------------ */
html[data-theme="ventriloc"] .app-footer { background: #ffffff; border-top: 1px solid #e8e8e8; }
html[data-theme="ventriloc"] ::-webkit-scrollbar-track { background: #f5f5f5; }
html[data-theme="ventriloc"] ::-webkit-scrollbar-thumb { background: #d8d8d8; }
html[data-theme="ventriloc"] ::-webkit-scrollbar-thumb:hover { background: #828282; }
html[data-theme="ventriloc"] .theme-option.active,
html[data-theme="ventriloc"] .font-option.active,
html[data-theme="ventriloc"] .size-option.active {
    border-color: #202020; box-shadow: 0 0 0 3px rgba(32, 32, 32, 0.12);
}

.theme-preview-ventriloc { background: #ffffff; }
.theme-preview-ventriloc .tp-nav { background: #ffffff; border-bottom: 1px solid #e8e8e8; }
.theme-preview-ventriloc .tp-body { background: #efefef; }
.theme-preview-ventriloc .tp-card { background: #ffffff; border: 1px solid #e8e8e8; box-shadow: none; }
.theme-preview-ventriloc .tp-card:first-child { background: #ebe6dd; }