/* CYBILAS "og" theme — dark navy canvas, soft slate/teal orbs, teal rules (2026-10-15) */
:root {
  --color-bg: #0F2B3D;
  --color-surface: #163A52;
  --color-text: #F1F5F9;
  --color-muted: #B8C7D6;
  --color-border: rgba(255, 255, 255, 0.12);
  color-scheme: dark;
}
html { background: #0F2B3D; }
body {
  color: #F1F5F9;
  background-color: #0F2B3D;
  background-image:
    radial-gradient(circle at 88% 8%, rgba(61, 107, 133, 0.22) 0, rgba(61, 107, 133, 0) 30%),
    radial-gradient(circle at 70% 30%, rgba(0, 168, 150, 0.08) 0, rgba(0, 168, 150, 0) 22%),
    radial-gradient(circle at 8% 92%, rgba(0, 168, 150, 0.14) 0, rgba(0, 168, 150, 0) 28%);
  background-attachment: fixed;
}

/* surfaces */
section.bg-surface { background-color: #0C2435 !important; border-color: rgba(255, 255, 255, 0.08) !important; }
.bg-surface { background-color: #163A52; }
.bg-bgsoft { background-color: #0F2B3D; }
div.bg-primary.rounded-2xl { background-color: #0B2030; border: 1px solid rgba(0, 168, 150, 0.28); }
section.bg-primary:not([id="hero"]) { border-top: 1px solid rgba(255, 255, 255, 0.06); border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
footer.bg-primary { background-color: #0B2030; }
#site-nav { background-color: rgba(15, 43, 61, 0.92); }

/* text */
.text-textmain { color: #F1F5F9; }
.text-muted { color: #B8C7D6; }
.text-slate-500 { color: #94A3B8; }
.text-primary { color: #F1F5F9; }
.border-line { border-color: rgba(255, 255, 255, 0.12); }
.card-hover:hover { box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35); }

/* teal rule under section titles — like the og card */
h2[id$="-title"]::after {
  content: ""; display: block; width: 3.5rem; height: 4px; border-radius: 2px;
  background: #00A896; margin-top: 0.9rem;
}
h2.text-center[id$="-title"]::after { margin-left: auto; margin-right: auto; }
h2.text-white[id$="-title"]::after { background: #5EEAD4; }

/* cards & catalogue (sketch-up / sell-up pages) */
.card, .book { background: #163A52; border-color: rgba(255, 255, 255, 0.12); }
.card h3, .book h3, .book dd { color: #F1F5F9; }
.card p, .book dt { color: #B8C7D6; }
.badge-soon { background: rgba(0, 168, 150, 0.16); color: #5EEAD4; border-color: rgba(0, 168, 150, 0.45); }
.badge-pending { background: rgba(255, 255, 255, 0.08); color: #CBD5E1; border-color: rgba(255, 255, 255, 0.2); }

/* forms */
input, select, textarea {
  background-color: #0F2B3D; color: #F1F5F9; border-color: rgba(255, 255, 255, 0.18);
}
input::placeholder, textarea::placeholder { color: #7C8DA0; }
select option { background: #0F2B3D; color: #F1F5F9; }
input:focus, select:focus, textarea:focus { border-color: #00A896; outline: none; box-shadow: 0 0 0 3px rgba(0, 168, 150, 0.25); }
input[type="checkbox"] { accent-color: #00A896; }
input[type="range"] { accent-color: #00A896; }
.accordion-item { background-color: #122F43; }
.field-invalid input, .field-invalid select, .field-invalid textarea { border-color: #F87171 !important; }
.text-red-600 { color: #F87171; }

/* buttons that assumed a light page */
.border-2.border-accent.text-accent:hover { color: #0F2B3D; }
.hover\:bg-white\/10:hover { background-color: rgba(255, 255, 255, 0.1); }

/* selection + scrollbar accents */
::selection { background: rgba(0, 168, 150, 0.45); color: #fff; }

/* SKILL UP registration table + any definition grids */
.info-grid { border-color: rgba(255, 255, 255, 0.12) !important; background: transparent !important; }
.info-grid dl { background: transparent !important; }
.info-grid dt { background: #163A52 !important; color: #B8C7D6 !important; border-color: rgba(255, 255, 255, 0.12) !important; }
.info-grid dd { background: #122F43 !important; color: #F1F5F9 !important; border-color: rgba(255, 255, 255, 0.12) !important; }
.info-grid a { color: #5EEAD4; }