/* ShutterOS Brand System v1.0
   Product: Cinematic Teal. Parent: Shikkha Deep Indigo.
   Load this file last so the same semantic roles govern the SPA and PHP tools. */

:root {
  --primary: #006a70;
  --on-primary: #ffffff;
  --primary-container: #9cf0f3;
  --on-pc: #002022;
  --secondary: #2a2d7c;
  --sec-container: #e2e0ff;
  --on-sc: #13153f;
  --tertiary: #8b5000;
  --ter-container: #ffddb7;
  --on-tc: #2c1600;
  --surface: #f7fafa;
  --surface-variant: #f1f5f5;
  --surface-container: #eaf0f0;
  --on-surface: #171d1e;
  --on-sv: #566062;
  --outline: #6f797a;
  --outline-v: #bec8c9;
  --error-bg: #ba1a1a;
  --error-container: #ffdad6;
  --green: #146c2e;
  --gold: #7a5700;
}

html { color-scheme: light; }
body[data-theme="light"] {
  background-color: #eaf0f0 !important;
  color: #171d1e;
}

body[data-theme="dark"] {
  --primary: #7cd4d8;
  --on-primary: #003739;
  --primary-container: #004f53;
  --on-pc: #9cf0f3;
  --secondary: #b6b7ee;
  --sec-container: #1f2161;
  --on-sc: #e2e0ff;
  --tertiary: #ffb95c;
  --ter-container: #693c00;
  --on-tc: #ffddb7;
  --surface: #0e1415;
  --surface-variant: #151b1c;
  --surface-container: #1b2223;
  --on-surface: #dee4e4;
  --on-sv: #bec8c9;
  --outline: #899394;
  --outline-v: #3f494a;
  --error-bg: #ffb4ab;
  --error-container: #93000a;
  --green: #83d994;
  --gold: #f3c34f;
  color-scheme: dark;
  background-color: #0e1415 !important;
}

/* Product marks. JavaScript inserts the actual SVG into legacy letter tiles. */
.shutteros-brand-mark {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: inherit;
}

.shikkha-endorsement {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
  color: #566062;
  font-size: 9px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .01em;
  white-space: nowrap;
}
.shikkha-endorsement img { width: 11px; height: 11px; display: block; }
body[data-theme="dark"] .shikkha-endorsement { color: #bec8c9; }
.shikkha-endorsement.on-dark {
  margin-top: 0;
  padding: 5px 9px;
  border-radius: 999px;
  background: #f7fafa;
  color: #2a2d7c;
}

/* Core application roles and branded data visuals. */
.nr-mark,
.auth-brand .mark,
.home-nav .brand .mark {
  background: #006a70 !important;
  color: transparent !important;
}
.nr-item.active,
.chip.active,
.bn-item.active::before { background-color: #9cf0f3 !important; color: #002022 !important; }
.bar-chart-bar { background: linear-gradient(180deg,#40bdc4,#00858c) !important; }
.exp-bar-fill { background: #8b5000 !important; }
.exp-bar-val { color: #8b5000 !important; }
.kpi-purple { background: #e5f7f8 !important; border-color: #7cd4d8 !important; }
.kpi-purple::after { background: linear-gradient(90deg,#006a70,#40bdc4) !important; }
.button.primary:hover { background: #004f53; box-shadow: 0 6px 16px rgba(0,106,112,.28) !important; }
input:focus, select:focus, textarea:focus { border-color:#006a70 !important; box-shadow:0 0 0 3px rgba(0,106,112,.16) !important; }
::selection { background:#9cf0f3 !important; color:#002022 !important; }

/* Custom public landing page is injected after page load, so pin its roles. */
#shuttr-home {
  --pri:#006a70 !important;
  --pri2:#00858c !important;
  --ink:#171d1e !important;
  --mut:#566062 !important;
  --line:#dce5e5 !important;
}
#shuttr-home .hero { background:radial-gradient(1100px 420px at 50% -80px,#dff7f8 0%,#fff 62%) !important; }
#shuttr-home h1 span { color:#006a70 !important; background:none !important; -webkit-text-fill-color:currentColor !important; }
#shuttr-home .btn-fill,
#shuttr-mnav-btn { background:#006a70 !important; box-shadow:0 4px 14px rgba(0,106,112,.32) !important; }
#shuttr-home .btn-fill:hover { background:#004f53 !important; }
#shuttr-home .free { background:linear-gradient(135deg,#002f33,#006a70) !important; }
#shuttr-home .foot { display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; }
#shuttr-home .foot .shikkha-endorsement { margin-top:0; }
.shuttr-mnav-link.star { color:#002022 !important; background:#9cf0f3 !important; }
.shuttr-mnav-link:focus-visible { outline-color:#006a70 !important; }

/* Tailwind CDN utility aliases used by the PHP companion surfaces. */
.bg-violet-600 { background-color:#006a70 !important; }
.hover\:bg-violet-700:hover { background-color:#004f53 !important; }
.active\:bg-violet-800:active { background-color:#00373a !important; }
.bg-violet-50 { background-color:#e5f7f8 !important; }
.hover\:bg-violet-100:hover { background-color:#c7f8fa !important; }
.text-violet-700, .text-violet-600 { color:#006a70 !important; }
.text-violet-200 { color:#9cf0f3 !important; }
.text-violet-300\/80 { color:rgba(156,240,243,.8) !important; }
.border-violet-600 { border-color:#006a70 !important; }
.focus\:border-violet-400:focus { border-color:#7cd4d8 !important; }
.focus-visible\:outline-violet-700:focus-visible { outline-color:#006a70 !important; }
.decoration-violet-400\/60 { text-decoration-color:rgba(124,212,216,.6) !important; }
.from-violet-600\/30 { --tw-gradient-from:rgba(0,106,112,.30) var(--tw-gradient-from-position) !important; --tw-gradient-to:rgba(0,106,112,0) var(--tw-gradient-to-position) !important; }
.to-fuchsia-600\/20 { --tw-gradient-to:rgba(139,80,0,.20) var(--tw-gradient-to-position) !important; }
.border-violet-400\/20 { border-color:rgba(124,212,216,.20) !important; }

/* Exact operational semantics. Never rely on hue alone; existing labels/icons remain. */
.bg-green-50, .bg-emerald-50 { background-color:#e4f5e8 !important; }
.bg-green-100, .bg-emerald-100 { background-color:#c4ebcd !important; }
.text-green-700, .text-green-800, .text-emerald-700, .text-emerald-800 { color:#146c2e !important; }
.border-green-200, .border-emerald-200 { border-color:#83d994 !important; }
.bg-amber-50 { background-color:#fff4d6 !important; }
.bg-amber-100 { background-color:#ffe08a !important; }
.text-amber-700, .text-amber-800 { color:#7a5700 !important; }
.border-amber-200 { border-color:#f3c34f !important; }
.bg-red-50 { background-color:#ffdad6 !important; }
.bg-red-100 { background-color:#ffdad6 !important; }
.text-red-700, .text-red-800 { color:#93000a !important; }
.border-red-200, .border-red-300 { border-color:#ffb4ab !important; }

/* Dark member dashboard: use the dark M3 pair, not white text on light teal. */
body[data-theme="dark"] .bg-violet-600 { background-color:#7cd4d8 !important; color:#003739 !important; }
body[data-theme="dark"] .hover\:bg-violet-700:hover { background-color:#9cf0f3 !important; }
body[data-theme="dark"] .text-violet-200 { color:#9cf0f3 !important; }
body[data-theme="dark"] .focus\:border-violet-400:focus { border-color:#7cd4d8 !important; }

/* PHP pages carry legacy inline backgrounds; the shared layer is authoritative. */
body[data-theme="light"] .brand-bg,
body[data-theme="light"] .btn-brand { background-color:#006a70 !important; }
body[data-theme="light"] .btn-brand:hover { background-color:#004f53 !important; }
body[data-theme="light"] .text-brand { color:#006a70 !important; }
body[data-theme="light"] .sidebar-link.active { background:#9cf0f3 !important; color:#002022 !important; }
body[data-theme="light"] .sidebar-link:hover { background:#f1f5f5 !important; color:#171d1e !important; }

@media (prefers-contrast:more) {
  :focus-visible { outline-width:3px !important; }
  .surface,.card,.kpi-card { border-color:#566062 !important; }
}