/* ============================================================
   STRUCTURED THEME — "Renaissance gallery on putty paper".
   Warm putty canvas, stark black, hairline rules, NO gradients,
   NO shadows. Serif display + grotesk utility. Scoped under
   html[data-theme="structured"]; loaded AFTER style.css.
   Also defines the "Helvetica Now (Structured)" font stack.
   ============================================================ */

/* ------------------------------------------------------------
   1) TOKENS -> app variables
   ------------------------------------------------------------ */
html[data-theme="structured"] {
    --primary: #000000;          /* Ink — filled action (CTA) */
    --primary-dark: #1a1a1a;
    --primary-light: #3a3a3a;
    --primary-50: #efeeea;
    --primary-100: #e7e5e4;      /* Bone */
    --primary-200: #dfdcd5;      /* Vellum */
    --primary-300: #c4c3b6;      /* Putty */
    --primary-600: #1a1a1a;
    --primary-700: #000000;
    --primary-800: #000000;      /* headings -> Ink */
    --primary-900: #000000;

    --secondary: #595855;        /* Graphite */

    /* Neutralized semantics (no saturated color) */
    --success: #595855;
    --success-light: #dfdcd5;
    --warning: #808080;
    --warning-light: #e7e5e4;
    --danger: #000000;
    --danger-light: #e7e5e4;
    --info: #595855;

    --bg-body: #c4c3b6;          /* Putty canvas */
    --bg-card: #e7e5e4;          /* Bone card */
    --bg-nav: #000000;           /* Ink room */

    --text-primary: #000000;     /* Ink */
    --text-secondary: #595855;   /* Graphite */
    --text-muted: #808080;       /* Ash */

    --border-color: #dfdcd5;     /* Vellum */
    --border-radius: 9px;

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

    --bs-primary: #000000;
    --bs-primary-rgb: 0, 0, 0;

    --font-family: 'Helvetica Now', 'Inter', 'Helvetica Neue', Arial, sans-serif;
}

/* Explicit font choice: "Helvetica Now (Structured)" */
[data-font="helvetica-now"] {
    --font-family: 'Helvetica Now', 'Inter', 'Helvetica Neue', Arial, sans-serif;
}

/* ------------------------------------------------------------
   2) Typography — serif display (Davinci) + grotesk utility
   ------------------------------------------------------------ */
html[data-theme="structured"] h1, html[data-theme="structured"] h2,
html[data-theme="structured"] h3, html[data-theme="structured"] h4,
html[data-theme="structured"] h5, html[data-theme="structured"] h6,
html[data-theme="structured"] .card-title,
html[data-theme="structured"] .display-1, html[data-theme="structured"] .display-2,
html[data-theme="structured"] .display-3, html[data-theme="structured"] .display-4,
html[data-theme="structured"] .display-5, html[data-theme="structured"] .display-6 {
    font-family: 'Davinci', 'Playfair Display', Georgia, 'Times New Roman', serif;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: #000000 !important;
}

/* ------------------------------------------------------------
   3) Navbar — solid Ink bar, white labels (base already white)
   ------------------------------------------------------------ */
html[data-theme="structured"] .navbar {
    background: #000000;
    border-bottom: 1px solid #000000;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
html[data-theme="structured"] .navbar-brand i { color: #ffffff; filter: none; }

/* ------------------------------------------------------------
   4) Dropdown menus — Ink room
   ------------------------------------------------------------ */
html[data-theme="structured"] .dropdown-menu,
html[data-theme="structured"] .dropdown-menu-dark {
    background: #1a1a1a;
    border: 1px solid #3a3a3a;
    border-radius: 2px;
    box-shadow: none;
}
html[data-theme="structured"] .dropdown-menu-dark .dropdown-item,
html[data-theme="structured"] .dropdown-menu .dropdown-item { color: #e7e5e4; }
html[data-theme="structured"] .dropdown-menu-dark .dropdown-item:hover,
html[data-theme="structured"] .dropdown-menu .dropdown-item:hover {
    background: rgba(255, 255, 255, 0.08); color: #ffffff;
}
html[data-theme="structured"] .dropdown-menu-dark .dropdown-divider,
html[data-theme="structured"] .dropdown-menu .dropdown-divider { border-color: #3a3a3a; }
html[data-theme="structured"] .dropdown-menu-dark .dropdown-item-text { color: #808080; }

/* ------------------------------------------------------------
   5) Cards — flat 9px, hairline Vellum
   ------------------------------------------------------------ */
html[data-theme="structured"] .card {
    border-radius: 9px;
    box-shadow: 0 0 0 1px #dfdcd5;
    border-color: transparent;
}
html[data-theme="structured"] .card:hover {
    box-shadow: 0 0 0 1px #c4c3b6;
    transform: none;
    border-color: transparent;
}
html[data-theme="structured"] .card-header,
html[data-theme="structured"] .card-footer {
    background: #efeeea;
    border-color: #dfdcd5;
}
html[data-theme="structured"] .card-header {
    border-top-left-radius: 9px; border-top-right-radius: 9px;
}
html[data-theme="structured"] .card-footer {
    border-bottom-left-radius: 9px; border-bottom-right-radius: 9px;
}

/* ------------------------------------------------------------
   6) Buttons — black pill (28.8px), flat
   ------------------------------------------------------------ */
html[data-theme="structured"] .btn { border-radius: 28.8px; }
html[data-theme="structured"] .btn-primary {
    background: #000000 !important; border: none !important;
    color: #ffffff !important; box-shadow: none !important;
}
html[data-theme="structured"] .btn-primary:hover,
html[data-theme="structured"] .btn-primary:active {
    background: #1a1a1a !important; box-shadow: none !important;
    transform: none !important; color: #ffffff !important;
}
html[data-theme="structured"] .btn-outline-primary {
    border: 1px solid #000000 !important; color: #000000 !important;
    background: transparent !important; box-shadow: none !important;
}
html[data-theme="structured"] .btn-outline-primary:hover {
    background: #000000 !important; color: #ffffff !important;
    transform: none !important; box-shadow: none !important;
}
html[data-theme="structured"] .btn-outline-secondary {
    border: 1px solid #595855 !important; color: #595855 !important; box-shadow: none !important;
}
html[data-theme="structured"] .btn-outline-secondary:hover {
    border-color: #000000 !important; color: #000000 !important; background: #efeeea !important;
}
html[data-theme="structured"] .btn-success,
html[data-theme="structured"] .btn-danger,
html[data-theme="structured"] .btn-warning,
html[data-theme="structured"] .btn-info {
    background: #595855 !important; border: none !important;
    color: #ffffff !important; box-shadow: none !important;
}
html[data-theme="structured"] .btn-link { color: #000000 !important; }

/* ------------------------------------------------------------
   7) Forms — 2px corners, warm hairline, ink focus
   ------------------------------------------------------------ */
html[data-theme="structured"] .form-control,
html[data-theme="structured"] .form-select {
    border: 1px solid #c4c3b6 !important;
    border-radius: 2px !important;
    background: #ffffff !important;
}
html[data-theme="structured"] .form-control:focus,
html[data-theme="structured"] .form-select:focus {
    border-color: #000000 !important;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.12) !important;
}
html[data-theme="structured"] .input-group-text {
    border: 1px solid #c4c3b6 !important;
    border-radius: 2px !important;
    background: #e7e5e4 !important;
    color: #000000 !important;
}
html[data-theme="structured"] input,
html[data-theme="structured"] select,
html[data-theme="structured"] textarea {
    color: #000000 !important; -webkit-text-fill-color: #000000 !important;
}
html[data-theme="structured"] .form-check-input:checked { background-color: #000000; border-color: #000000; }
html[data-theme="structured"] .form-check-input:focus { border-color: #000000; box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.15); }

/* ------------------------------------------------------------
   8) Tables — Ink text, Vellum header band
   ------------------------------------------------------------ */
html[data-theme="structured"] table, html[data-theme="structured"] thead,
html[data-theme="structured"] tbody, html[data-theme="structured"] tfoot,
html[data-theme="structured"] tr, html[data-theme="structured"] td,
html[data-theme="structured"] th {
    color: #000000 !important; -webkit-text-fill-color: #000000 !important;
}
html[data-theme="structured"] .table-modern thead th { background: #dfdcd5; color: #000000 !important; }
html[data-theme="structured"] .table-modern tbody tr:hover { background: #dfdcd5; }

/* ------------------------------------------------------------
   9) Bootstrap utility accents -> Ink / warm grays
   ------------------------------------------------------------ */
html[data-theme="structured"] .text-primary { color: #000000 !important; -webkit-text-fill-color: #000000 !important; }
html[data-theme="structured"] .link-primary { color: #000000 !important; }
html[data-theme="structured"] .bg-primary { background-color: #000000 !important; }
html[data-theme="structured"] .bg-primary-subtle { background-color: #e7e5e4 !important; }
html[data-theme="structured"] .border-primary { border-color: #000000 !important; }
html[data-theme="structured"] .progress-bar { background-color: #000000 !important; background-image: none !important; }
html[data-theme="structured"] .page-link { color: #000000; border-color: #dfdcd5; }
html[data-theme="structured"] .page-item.active .page-link { background-color: #000000; border-color: #000000; color: #fff; }
html[data-theme="structured"] .nav-pills .nav-link.active { background-color: #000000; color: #fff; border-radius: 2px; }
html[data-theme="structured"] .nav-tabs .nav-link.active { color: #000000; }
html[data-theme="structured"] .list-group-item.active { background-color: #000000; border-color: #000000; color: #fff; }
html[data-theme="structured"] .badge.bg-primary { background-color: #000000 !important; }

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

/* ------------------------------------------------------------
   11) Profile header — Ink room
   ------------------------------------------------------------ */
html[data-theme="structured"] .profile-header {
    background: #000000;
    color: #ffffff;
    border-radius: 9px;
    box-shadow: none;
}
html[data-theme="structured"] .profile-header::before { display: none; }

/* ------------------------------------------------------------
   12) Login / register — putty canvas, bone card
   ------------------------------------------------------------ */
html[data-theme="structured"] .login-page { background: #c4c3b6; }
html[data-theme="structured"] .login-page::before,
html[data-theme="structured"] .login-page::after { display: none; }
html[data-theme="structured"] .login-card {
    background: #e7e5e4; border-radius: 9px; box-shadow: 0 0 0 1px #dfdcd5;
}
html[data-theme="structured"] .login-brand i { color: #000000; }
html[data-theme="structured"] .login-brand h2 { color: #000000; }
html[data-theme="structured"] .login-card .input-group-text {
    background: #dfdcd5; color: #000000; border-color: #c4c3b6;
}
html[data-theme="structured"] .login-card .form-control:focus,
html[data-theme="structured"] .login-card .input-group:focus-within .input-group-text {
    border-color: #000000; box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.12);
}

/* ------------------------------------------------------------
   13) Neutralized semantics (profit/loss, status, alerts)
   ------------------------------------------------------------ */
html[data-theme="structured"] .text-profit { color: #000000 !important; -webkit-text-fill-color: #000000 !important; }
html[data-theme="structured"] .text-loss { color: #595855 !important; -webkit-text-fill-color: #595855 !important; }
html[data-theme="structured"] .text-success,
html[data-theme="structured"] .text-danger,
html[data-theme="structured"] .text-warning,
html[data-theme="structured"] .text-info { color: #595855 !important; -webkit-text-fill-color: #595855 !important; }
html[data-theme="structured"] .alert-success,
html[data-theme="structured"] .alert-danger,
html[data-theme="structured"] .alert-warning,
html[data-theme="structured"] .alert-info { background: #e7e5e4 !important; color: #000000 !important; }
html[data-theme="structured"] .badge.bg-success,
html[data-theme="structured"] .badge.bg-danger,
html[data-theme="structured"] .badge.bg-warning,
html[data-theme="structured"] .badge.bg-info { background: #595855 !important; color: #ffffff !important; }

/* ------------------------------------------------------------
   14) Misc surfaces + theme preview
   ------------------------------------------------------------ */
html[data-theme="structured"] .app-footer { background: #ebebeb; border-top: 1px solid #dfdcd5; }
html[data-theme="structured"] ::-webkit-scrollbar-track { background: #e7e5e4; }
html[data-theme="structured"] ::-webkit-scrollbar-thumb { background: #c4c3b6; }
html[data-theme="structured"] ::-webkit-scrollbar-thumb:hover { background: #808080; }
html[data-theme="structured"] .theme-option.active,
html[data-theme="structured"] .font-option.active,
html[data-theme="structured"] .size-option.active {
    border-color: #000000; box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.12);
}

.theme-preview-structured { background: #c4c3b6; }
.theme-preview-structured .tp-nav { background: #000000; }
.theme-preview-structured .tp-body { background: #c4c3b6; }
.theme-preview-structured .tp-card { background: #e7e5e4; border: 1px solid #dfdcd5; box-shadow: none; }
.theme-preview-structured .tp-card:first-child { background: #dfdcd5; }