@import url('/css/themes/darkly.css');

/* IPOSphere colour contract: components consume roles, never palette literals.
   Light follows the default; dark follows the OS. data-theme can override either.
   Gold is decorative; accessible accent is used for text and interactive states. */
:root {
  color-scheme: light;
  --burgundy: #744245;
  --oxblood: #3E2029;
  --warm-ivory: #F8F5F1;
  --dusty-rose: #EADADB;
  --muted-gold: #B79A68;
  --canvas: var(--warm-ivory);
  --deep: #F0E9E5;
  --surface: #FFFDFA;
  --raised: #F4EDEA;
  --ivory: #30242A;
  --stone: #625258;
  --muted: #706168;
  --border: #DFD2D0;
  --input-border: #958087;
  --accent: var(--burgundy);
  --primary: var(--burgundy);
  --primary-hover: #613338;
  --on-primary: #FFFFFF;
  --selection: var(--dusty-rose);
  --selection-text: var(--oxblood);
  --gold: var(--muted-gold);
  --gold-pale: var(--accent); /* Legacy role retained for existing components. */
  --green: #287047;
  --on-success: #FFFFFF;
  --warning: #815514;
  --error: #AF283B;
  --nav-bg: var(--oxblood);
  --nav-text: var(--warm-ivory);
  --nav-muted: #DDC9CE;
  --nav-active: var(--burgundy);
  --hero-bg: var(--oxblood);
  --hero-text: var(--warm-ivory);
  --hero-muted: #DDC9CE;
  --hero-border: #AA7C84;
  --featured-bg: #F1E6E2;
  --featured-text: var(--oxblood);
  --watermark: var(--burgundy);
  --scrim: #221219B8;
  --shadow: 0 5px 20px #3E202908;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --canvas: #191316;
    --deep: #21191D;
    --surface: #281F23;
    --raised: #34272D;
    --ivory: #F8F5F1;
    --stone: #D2BEC4;
    --muted: #BCA5AD;
    --border: #503D45;
    --input-border: #977981;
    --accent: #DDA8AF;
    --primary: #744245;
    --primary-hover: #855055;
    --selection: #51313D;
    --selection-text: #F8E8EB;
    --green: #93D5AF;
    --warning: #E6BD79;
    --error: #FFA0AF;
    --featured-bg: #38252D;
    --featured-text: #F8F5F1;
    --watermark: #EADADB;
    --scrim: #100A0DCF;
    --shadow: 0 5px 20px #00000020;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --canvas: #191316;
  --deep: #21191D;
  --surface: #281F23;
  --raised: #34272D;
  --ivory: #F8F5F1;
  --stone: #D2BEC4;
  --muted: #BCA5AD;
  --border: #503D45;
  --input-border: #977981;
  --accent: #DDA8AF;
  --primary: #744245;
  --primary-hover: #855055;
  --selection: #51313D;
  --selection-text: #F8E8EB;
  --green: #93D5AF;
  --warning: #E6BD79;
  --error: #FFA0AF;
  --featured-bg: #38252D;
  --featured-text: #F8F5F1;
  --watermark: #EADADB;
  --scrim: #100A0DCF;
  --shadow: 0 5px 20px #00000020;
}

:root, [data-bs-theme] {
  --bs-body-bg: var(--canvas);
  --bs-body-color: var(--ivory);
  --bs-emphasis-color: var(--ivory);
  --bs-secondary-color: var(--stone);
  --bs-tertiary-color: var(--muted);
  --bs-secondary-bg: var(--surface);
  --bs-tertiary-bg: var(--raised);
  --bs-border-color: var(--border);
  --bs-primary: var(--primary);
  --bs-primary-rgb: 116, 66, 69;
  --bs-link-color: var(--accent);
  --bs-link-hover-color: var(--accent);
  --bs-link-color-rgb: 116, 66, 69;
  --bs-link-hover-color-rgb: 116, 66, 69;
  --bs-light: var(--raised);
  --bs-dark: var(--deep);
  --bs-form-valid-color: var(--green);
  --bs-form-invalid-color: var(--error);
}
body { background: var(--canvas); color: var(--ivory); }
.card, .dropdown-menu, .modal-content, .list-group-item {
  background-color: var(--surface); color: var(--ivory); border-color: var(--border);
}
.card { border-radius: 8px; box-shadow: var(--shadow); }
.card-header, .card-footer, .bg-light, .bg-dark, .bg-secondary {
  background-color: var(--deep) !important; color: var(--ivory);
}
.navbar { background: var(--nav-bg) !important; }
.navbar .navbar-brand, .navbar .nav-link { color: var(--nav-text) !important; }
.navbar .nav-link.active, .navbar .nav-link:hover { background: var(--nav-active); }
.form-control, .form-select, .form-control:focus, .form-select:focus {
  background-color: var(--surface); color: var(--ivory); border-color: var(--input-border);
}
.form-control::placeholder { color: var(--muted); opacity: 1; }
.text-muted, .text-secondary { color: var(--muted) !important; }
.text-success { color: var(--green) !important; }
.text-warning { color: var(--warning) !important; }
.text-danger { color: var(--error) !important; }
a { color: var(--accent); }
.text-primary, .btn-link { color: var(--accent) !important; }
a:hover { text-decoration: underline; }
p a:not(.btn), .md-div a:not(.btn) { text-decoration: underline; text-underline-offset: 3px; }
.btn-primary, .btn-outline-primary {
  --bs-btn-color: var(--on-primary);
  --bs-btn-bg: var(--primary);
  --bs-btn-border-color: var(--primary);
  --bs-btn-hover-color: var(--on-primary);
  --bs-btn-hover-bg: var(--primary-hover);
  --bs-btn-hover-border-color: var(--primary-hover);
  --bs-btn-active-color: var(--on-primary);
  --bs-btn-active-bg: var(--primary-hover);
  --bs-btn-active-border-color: var(--primary-hover);
  --bs-btn-disabled-color: var(--on-primary);
  --bs-btn-disabled-bg: var(--primary);
  --bs-btn-disabled-border-color: var(--primary);
}
.btn-outline-primary { --bs-btn-color: var(--accent); --bs-btn-bg: transparent; }
.btn-secondary, .btn-outline-secondary {
  --bs-btn-color: var(--ivory);
  --bs-btn-bg: var(--raised);
  --bs-btn-border-color: var(--input-border);
  --bs-btn-hover-color: var(--selection-text);
  --bs-btn-hover-bg: var(--selection);
  --bs-btn-hover-border-color: var(--accent);
}
.nav-pills .nav-link.active, .page-item.active .page-link {
  background: var(--primary); border-color: var(--primary); color: var(--on-primary) !important;
}
.nav-tabs { border-color: var(--border); }
.nav-tabs .nav-link.active { background: var(--selection); color: var(--selection-text) !important; border-color: var(--border); }
.page-link { background: var(--surface); border-color: var(--border); }
.page-link:hover { background: var(--selection); }
blockquote { border-left: 3px solid var(--gold); padding-left: 16px; color: var(--stone); }
code, pre { color: var(--ivory); background: var(--deep); }
hr { border-color: var(--border); }
::selection { background: var(--selection); color: var(--selection-text); }
:where(a, button, input, select, textarea):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.iposphere-embedded .navbar,
.iposphere-embedded aside,
.iposphere-embedded .sidebar,
.iposphere-embedded footer { display: none !important; }
.iposphere-embedded .container,
.iposphere-embedded .container-lg,
.iposphere-embedded .container-fluid { max-width: 100% !important; }
.iposphere-embedded .col-md-8.col-lg-9 { width: 100% !important; }
.iposphere-embedded main { padding-top: 12px; }