/* ===================================================================
   Dominion — shared theme tokens + components (light / dark)
   Colors are exposed as RGB channel triples so Tailwind's /alpha
   modifiers (e.g. bg-background/85) keep working across themes.
   =================================================================== */

:root, html.dark {
  --bg-rgb: 10 10 10;
  --surface-rgb: 17 17 17;
  --raised-rgb: 22 22 22;
  --on-rgb: 236 236 236;
  --secondary-rgb: 154 154 154;
  --faint-rgb: 106 106 106;
  --c-outline: rgba(255,255,255,0.08);
  --grid: rgba(255,77,0,0.06);
  --dd-bg: #0E0E0E;
  --ghost-border: rgba(255,255,255,0.18);
  --hair: rgba(255,255,255,0.08);
  color-scheme: dark;
}

html.light {
  --bg-rgb: 244 241 236;
  --surface-rgb: 251 250 247;
  --raised-rgb: 236 232 225;
  --on-rgb: 22 19 14;
  --secondary-rgb: 84 79 71;
  --faint-rgb: 140 133 122;
  --c-outline: rgba(22,19,14,0.13);
  --grid: rgba(255,77,0,0.10);
  --dd-bg: #FBFAF7;
  --ghost-border: rgba(22,19,14,0.26);
  --hair: rgba(22,19,14,0.12);
  color-scheme: light;
}

html { background: rgb(var(--bg-rgb)); }
body { background: rgb(var(--bg-rgb)); transition: background-color .35s ease, color .35s ease; }

/* ---- Eyebrow / kicker ---- */
.kicker { font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.32em; text-transform:uppercase; color:#FF6A2B; }
.rule { height:1px; background:linear-gradient(90deg, rgba(255,77,0,.5), rgba(255,77,0,0)); }

/* ---- Buttons ---- */
.btn-primary { background:#FF4D00; color:#0A0A0A; font-weight:700; letter-spacing:.08em; transition:background .2s ease, transform .2s ease; }
.btn-primary:hover { background:#FF6A2B; }
.btn-ghost { border:1px solid var(--ghost-border); color:rgb(var(--on-rgb)); transition:border-color .2s ease, color .2s ease; }
.btn-ghost:hover { border-color:#FF4D00; color:#FF6A2B; }
a:focus-visible, button:focus-visible, input:focus-visible { outline:2px solid #FF6A2B; outline-offset:3px; }

/* ---- Faint dotted grid ---- */
.grid-faint { background-image:radial-gradient(var(--grid) 1px, transparent 0); background-size:42px 42px; }

/* ---- Entrance animations (content visible at rest; only transform is nudged) ---- */
@keyframes slideUp { from { transform:translateY(16px); } to { transform:none; } }
@keyframes drawLine { from { stroke-dashoffset:2400; } to { stroke-dashoffset:0; } }
.draw { stroke-dasharray:2400; stroke-dashoffset:0; }
@media (prefers-reduced-motion: no-preference) {
  .reveal { animation:slideUp .7s cubic-bezier(.2,.7,.2,1) both; animation-delay:var(--d, 0s); }
  .draw { animation:drawLine 2.6s cubic-bezier(.4,0,.2,1) both; animation-delay:var(--d, 0s); }
}

/* ---- Nav dropdown ---- */
.dropdown { position:relative; }
.dropdown-menu { display:none; position:absolute; top:calc(100% + 10px); left:0; min-width:220px; background:var(--dd-bg); border:1px solid var(--c-outline); z-index:100; box-shadow:0 18px 40px -24px rgba(0,0,0,.6); }
.dropdown-menu::before { content:''; position:absolute; top:-12px; left:0; right:0; height:12px; }
.dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display:block; }
.dropdown-menu a, .dropdown-menu span { display:block; padding:11px 16px; font-family:'Space Grotesk',sans-serif; font-size:13px; letter-spacing:.02em; color:rgb(var(--secondary-rgb)); transition:all .18s; }
.dropdown-menu a:hover { color:#FF6A2B; background:rgba(255,77,0,.06); }
.dropdown-menu .desc { display:block; font-size:11px; color:rgb(var(--faint-rgb)); padding:0 16px 11px; margin-top:-6px; }
.dropdown-menu .inactive { color:rgb(var(--faint-rgb) / .7); cursor:default; }

/* ---- Logo + theme-icon swap (driven by html.dark / html.light) ---- */
.logo-dark { display:none; }
.logo-light { display:block; }
html.dark .logo-dark { display:block; }
html.dark .logo-light { display:none; }

.icon-sun  { display:none; }
.icon-moon { display:block; }
html.dark .icon-sun  { display:block; }
html.dark .icon-moon { display:none; }

/* ---- Mobile nav panel ---- */
#mobile-menu { display:none; }
#mobile-menu.open { display:block; }
.m-acc-body { display:none; }
.m-acc.open .m-acc-body { display:block; }
.m-acc.open .m-acc-chev { transform:rotate(180deg); }

/* ---- Modal ---- */
@keyframes modalIn { from { transform:translateY(14px) scale(.985); } to { transform:none; } }
@media (prefers-reduced-motion: no-preference) {
  #access-modal.flex .modal-card { animation:modalIn .24s cubic-bezier(.2,.7,.2,1) both; }
}

/* ---- Misc shared ---- */
::selection { background:#FF4D00; color:#0A0A0A; }
.hairline { background:var(--hair); }