/* ================================================================
   Construction Mythos — Theme
   Single source of truth for all CSS custom properties.
   All component styles consume these tokens only; no hardcoded hex.
   ================================================================ */

/* --- Self-hosted fonts --------------------------------------- */
@font-face {
  font-family: 'Space Grotesk';
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url('../vendor/fonts/space-grotesk/space-grotesk-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Space Grotesk';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('../vendor/fonts/space-grotesk/space-grotesk-latin-700-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('../vendor/fonts/inter/inter-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url('../vendor/fonts/inter/inter-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url('../vendor/fonts/inter/inter-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url('../vendor/fonts/jetbrains-mono/jetbrains-mono-latin-500-normal.woff2') format('woff2');
}

/* --- Light theme (:root) ------------------------------------ */
:root {
  /* Surfaces */
  --bg:            #F4F6F8;
  --surface:       #FFFFFF;
  --surface-2:     #EDF0F3;
  --border:        #DCE1E7;

  /* Text */
  --text:          #1A2230;
  --text-muted:    #5C6878;
  --text-inverse:  #FFFFFF;

  /* Brand / primary (blueprint indigo) */
  --primary:          #27406B;
  --primary-hover:    #1C2F4F;
  --primary-soft:     #E7ECF4;
  --primary-contrast: #FFFFFF;

  /* Signature accent (ochre) — branding & active-nav only */
  --accent:       #D9893C;
  --accent-hover: #C2752C;

  /* Semantic */
  --success:      #2E9E6B;
  --success-soft: #E3F3EC;
  --danger:       #D14343;
  --danger-soft:  #FAE7E7;
  --warning:      #E0A106;
  --warning-soft: #FBF1D6;
  --info:         #3B7DD8;
  --info-soft:    #E6EFFA;

  /* Sidebar (dark graphite even in light mode) */
  --sidebar-bg:         #141A22;
  --sidebar-surface:    #1C242E;
  --sidebar-text:       #C3CCD7;
  --sidebar-text-muted: #7C8896;
  --sidebar-active-bg:  #233B5E;
  --sidebar-active-bar: #D9893C;

  /* Typography */
  --font-display: 'Space Grotesk', sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  /* Type scale */
  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-lg:   1.125rem;
  --fs-xl:   1.25rem;
  --fs-2xl:  1.5rem;
  --fs-3xl:  1.875rem;

  /* Spacing (4px base) */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;

  /* Radius */
  --radius-sm:   6px;
  --radius:      8px;
  --radius-lg:   12px;
  --radius-pill: 999px;

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(16, 24, 33, .06);
  --shadow:    0 2px 8px rgba(16, 24, 33, .08);
  --shadow-lg: 0 12px 32px rgba(16, 24, 33, .16);

  /* Layout */
  --sidebar-width:           260px;
  --sidebar-collapsed-width: 72px;
  --topbar-height:           64px;

  /* Transition */
  --transition: 150ms ease;
}

/* --- Dark theme ([data-theme="dark"]) ----------------------- */
[data-theme="dark"] {
  --bg:       #0F141B;
  --surface:  #1A212B;
  --surface-2:#222B36;
  --border:   #2C3743;

  --text:         #E6EAF0;
  --text-muted:   #9AA7B5;
  --text-inverse: #0F141B;

  --primary:          #5B82C4;
  --primary-hover:    #6E92CE;
  --primary-soft:     #1E2C44;
  --primary-contrast: #FFFFFF;

  --accent:       #E8A04D;
  --accent-hover: #F0AC5E;

  --success:      #3FB57E; --success-soft: #16291F;
  --danger:       #E25A5A; --danger-soft:  #2E1818;
  --warning:      #ECB22E; --warning-soft: #2C2410;
  --info:         #5897E0; --info-soft:    #16263B;

  --sidebar-bg:         #0C1118;
  --sidebar-surface:    #141A22;
  --sidebar-text:       #C3CCD7;
  --sidebar-text-muted: #7C8896;
  --sidebar-active-bg:  #1C2C46;
  --sidebar-active-bar: #E8A04D;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .18);
  --shadow:    0 2px 8px rgba(0, 0, 0, .22);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, .40);
}

/* ================================================================
   Global component tokens — buttons & table headers
   Primary background + ochre text, consistent across all themes.
   ================================================================ */

/* ── Primary buttons (Bootstrap .btn-primary + custom) ────────── */
/* Shell dark (#141A22) background, ochre text — always dark regardless of theme */
.btn-primary {
    background-color: #141A22 !important;
    border-color:     #141A22 !important;
    color:            #D9893C !important;
    font-weight: 500;
}

.btn-primary:hover {
    background-color: #1C242E !important;
    border-color:     #1C242E !important;
    color:            #D9893C !important;
    box-shadow: 0 4px 12px rgba(20,26,34,.30);
}

.btn-primary:focus,
.btn-primary:focus-visible {
    background-color: #1C242E !important;
    border-color:     #1C242E !important;
    color:            #D9893C !important;
    box-shadow: 0 0 0 3px rgba(217,137,60,.25) !important;
    outline: none;
}

.btn-primary:active,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle {
    background-color: #1C242E !important;
    border-color:     #1C242E !important;
    color:            #D9893C !important;
}

.btn-primary:disabled,
.btn-primary.disabled {
    background-color: #141A22 !important;
    border-color:     #141A22 !important;
    color:            #D9893C !important;
    opacity: 0.6;
}

/* ── Outlined shell button (.btn-outline-shell) ───────────────── */
/* Transparent bg + dark border at rest → fills dark with ochre text on hover */
.btn-outline-shell {
    background-color: transparent;
    border: 1.5px solid #141A22;
    color: #141A22;
    font-weight: 500;
}

.btn-outline-shell:hover {
    background-color: #141A22;
    border-color:     #141A22;
    color:            #D9893C;
    box-shadow: 0 4px 12px rgba(20,26,34,.22);
}

.btn-outline-shell:focus,
.btn-outline-shell:focus-visible {
    background-color: #141A22;
    border-color:     #141A22;
    color:            #D9893C;
    box-shadow: 0 0 0 3px rgba(217,137,60,.25);
    outline: none;
}

.btn-outline-shell:active,
.btn-outline-shell.active {
    background-color: #1C242E;
    border-color:     #1C242E;
    color:            #D9893C;
}

.btn-outline-shell:disabled,
.btn-outline-shell.disabled {
    background-color: transparent;
    border-color:     #141A22;
    color:            #141A22;
    opacity: 0.5;
}

/* ── Table / DataTable headers ────────────────────────────────── */
table thead th,
.table thead th,
table.dataTable thead th,
table.dataTable thead td {
    background-color: #141A22 !important;
    color:            #D9893C !important;
    border-color:     #1C242E !important;
}