/*
   SS Classes visual system
   Shared styling for public pages, dashboards, account screens and learning
   spaces. Page-specific layouts remain intact; this file only unifies the
   typography, colour, surfaces and common controls.
*/

:root {
  --brand: #e85d43;
  --brand-hover: #cc4d37;
  --brand-dark: #cc4d37;
  --brand-soft: #fff0eb;
  --page: #f6f6f1;
  --surface: #fffefa;
  --surface-subtle: #f0f2ea;
  --text: #14201e;
  --text-soft: #334a48;
  --muted: #607573;
  --border: #d8dfd7;
  --border-strong: #b9c7bc;
  --focus-ring: rgba(232, 93, 67, .42);
  --shadow-sm: 0 2px 4px rgba(20, 32, 30, .04), 0 10px 24px rgba(20, 32, 30, .06);
  --shadow-md: 0 22px 52px rgba(20, 32, 30, .12);
  --bs-primary: #e85d43;
  --bs-primary-rgb: 232, 93, 67;
  --bs-link-color: #bb4935;
  --bs-link-hover-color: #963824;
}

body,
body button,
body input,
body select,
body textarea {
  font-family: "Manrope", "Segoe UI", sans-serif;
}

body {
  background: linear-gradient(135deg, #f8f8f3, var(--page) 52%, #f2f4ec);
  color: var(--text);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--text);
  font-weight: 800;
  letter-spacing: -.035em;
}

p { color: var(--text-soft); }
a { color: var(--brand); }
a:hover { color: var(--brand-hover); }
::selection { background: rgba(232, 93, 67, .22); }

/* Shared dark header creates a clear frame around every page. */
.site-header,
.site-header.is-scrolled {
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  background: #0d1623;
  box-shadow: 0 8px 24px rgba(10, 16, 24, .12);
}

.brand,
.brand:hover,
.brand-copy strong,
.nav-link,
.nav-link:hover {
  color: #f8fafc;
}

.brand-copy small { color: #afbec8; }
.brand-logo { background: #f8f8f3; border-color: rgba(255, 255, 255, .18); }
.nav-link:hover { background: rgba(255, 255, 255, .09); }
.nav-link.active { color: #ff9a85; }
.nav-link.active::after { background: #ff9a85; }
.icon-button {
  border-color: rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .06);
  color: #e7eef2;
}
.icon-button:hover {
  border-color: rgba(255, 255, 255, .34);
  background: rgba(255, 255, 255, .13);
  color: #fff;
}
.account-trigger {
  border-color: rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .06);
  color: #f8fafc;
}
.account-trigger:hover { border-color: rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .11); }
.account-copy small { color: #afbec8; }
.account-avatar { background: linear-gradient(135deg, #e85d43, #ff9a85); color: #fff; }

/* Reusable surfaces, controls and navigation. */
.section-kicker,
.catalog-header .section-kicker,
.auth-kicker { color: var(--brand); }
.btn { border-radius: .8rem; font-weight: 800; letter-spacing: -.01em; }
.btn-primary {
  border-color: var(--brand);
  background: var(--brand);
  color: #fff;
  box-shadow: 0 10px 22px rgba(232, 93, 67, .2);
}
.btn-primary:hover,
.btn-primary:focus { border-color: var(--brand-hover); background: var(--brand-hover); color: #fff; }
.btn-outline-primary {
  border-color: color-mix(in srgb, var(--brand) 65%, var(--border));
  color: #b64733;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus { border-color: var(--brand); background: var(--brand-soft); color: #8f3525; }
.btn-secondary { border-color: var(--text); background: var(--text); color: #fff; }
.btn-secondary:hover { border-color: #263832; background: #263832; color: #fff; }
.btn-light { border-color: var(--border); background: var(--surface); color: var(--text); }
.btn-light:hover { border-color: var(--border-strong); background: var(--surface-subtle); color: var(--text); }
.btn-ghost { color: var(--text-soft); }
.btn-ghost:hover,.btn-ghost.active { background: var(--brand-soft); color: #9b3a28; }

.form-control,
.form-select,
.input-group-text {
  border-color: var(--border-strong);
  background: var(--surface);
  color: var(--text);
}
.form-control:focus,
.form-select:focus {
  border-color: var(--brand);
  background: #fffefa;
  box-shadow: 0 0 0 3px rgba(232, 93, 67, .14);
}
.form-control::placeholder { color: #82918e; }
.form-check-input { accent-color: var(--brand); }
.input-shell { border-color: var(--border-strong); background: var(--surface); }
.input-shell:focus-within { border-color: var(--brand); background: #fffefa; box-shadow: 0 0 0 3px rgba(232, 93, 67, .14); }

.card,
.course-card,
.feature-card,
.auth-card,
.course-summary-card,
.course-detail-card,
.dashboard-section,
.surface-panel,
.admin-detail-panel,
.learning-sidebar,
.instructor-sidebar,
.admin-sidebar,
.catalog-controls,
.featured-wrap,
.test-series-workspace {
  border-color: var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.card,
.course-card,
.feature-card,
.dashboard-section,
.surface-panel,
.admin-detail-panel,
.learning-sidebar,
.instructor-sidebar,
.admin-sidebar,
.catalog-controls { border-radius: 1rem; }

.card:hover,
.course-card:hover,
.feature-card:hover { border-color: color-mix(in srgb, var(--brand) 35%, var(--border)); box-shadow: var(--shadow-md); }
.status-item,
.course-value-grid article,
.test-paper-card,
.test-series-summary > div { border-color: var(--border); background: var(--surface); }
.course-chip,
.course-category-label,
.role-pill,
.test-paper-kind { background: var(--brand-soft); color: #a43f2d; }
.metric-symbol,
.course-instructor > span,
.course-value-grid article > span { background: var(--brand-soft); color: var(--brand); }

.nav-tabs { border-bottom-color: var(--border); }
.nav-tabs .nav-link { color: var(--muted); }
.nav-tabs .nav-link:hover { border-color: transparent; background: var(--surface-subtle); color: var(--text); }
.nav-tabs .nav-link.active { border-color: var(--border) var(--border) var(--surface); background: var(--surface); color: var(--brand); }
.table { --bs-table-color: var(--text); --bs-table-bg: transparent; --bs-table-border-color: var(--border); --bs-table-hover-bg: var(--surface-subtle); --bs-table-hover-color: var(--text); }
.table > :not(caption) > * > * { border-bottom-color: var(--border); }
.table thead th { color: var(--text); background: var(--surface-subtle); }

/* Catalog, course, contact and learning pages share the home-page hierarchy. */
.catalog-header h1,
.dashboard-heading h1,
.admin-heading h1 { color: var(--text); font-weight: 850; letter-spacing: -.055em; }
.catalog-header p,
.dashboard-heading p,
.admin-heading p { color: var(--muted); }
.catalog-search { border-color: var(--border); background: var(--surface); box-shadow: var(--shadow-sm); }
.catalog-search:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(232, 93, 67, .14); }
.catalog-search kbd { border-color: var(--border); background: var(--surface-subtle); color: var(--muted); }
.course-overview {
  background: linear-gradient(135deg, #14201e, #263832 62%, #3d554a);
  box-shadow: 0 22px 50px rgba(20, 32, 30, .16);
}
.course-overview .section-kicker { color: #ff9a85; }
.course-overview .course-chip { border: 1px solid rgba(255, 255, 255, .15); background: rgba(255, 255, 255, .1); color: #f5f8f5; }
.course-author-line > span { background: var(--brand); }
.course-enroll-card { border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 24px 55px rgba(0, 0, 0, .24); }
.course-sales-panel { border-color: var(--border); background: var(--surface); }
.learning-progress-strip { border-color: var(--border); background: var(--surface); box-shadow: var(--shadow-sm); }

/* Account and utility screens. */
.auth-page { background: #0d1623; }
.auth-shell::after { background: linear-gradient(90deg, rgba(13, 22, 35, .35), rgba(20, 32, 30, .46) 48%, rgba(13, 22, 35, .9) 74%, rgba(13, 22, 35, .96)); }
.auth-card { border-color: rgba(255, 255, 255, .28); background: rgba(255, 254, 250, .94); }
.auth-story-copy .eyebrow { color: #ffaf9d; }
.auth-story-copy h1 { letter-spacing: -.06em; }
.auth-proof span { border-color: rgba(255, 255, 255, .2); background: rgba(13, 22, 35, .42); }
.modal-content,
.dropdown-menu,
.accordion-item,
.confirm-dialog { border-color: var(--border); background: var(--surface); color: var(--text); box-shadow: var(--shadow-md); }
.dropdown-item { color: var(--text-soft); }
.dropdown-item:hover,.dropdown-item:focus { background: var(--brand-soft); color: #943625; }
.alert { border: 1px solid currentColor; border-radius: .85rem; }

/* Finish every page with the same dark ink used in the home hero. */
.site-footer { border-top-color: rgba(255, 255, 255, .1); background: #14201e; color: #c6d4cd; }
.footer-shell h2,.footer-shell h3 { color: #fff; }
.footer-shell h3 { color: #ff9a85; }
.footer-shell p,.footer-shell a,.footer-shell span,.footer-bottom { color: #b9c9c1; }
.footer-shell a:hover { color: #fff; }
.footer-bottom { border-top-color: rgba(255, 255, 255, .1); }

/* Night mode uses the same palette at lower brightness, not a second design. */
.dark-mode {
  --brand: #ff8b73;
  --brand-hover: #ffad9d;
  --brand-dark: #ffad9d;
  --brand-soft: #3a2220;
  --page: #0a1214;
  --surface: #111d1c;
  --surface-subtle: #172725;
  --text: #f3f7f4;
  --text-soft: #cfdbd6;
  --muted: #9db1aa;
  --border: #29403a;
  --border-strong: #486057;
  --focus-ring: rgba(255, 139, 115, .58);
  --bs-primary: #ff8b73;
  --bs-primary-rgb: 255, 139, 115;
  --bs-link-color: #ffab99;
  --bs-link-hover-color: #ffc0b2;
  background: linear-gradient(135deg, #0a1214, #0e1818 52%, #0d161e);
}

.dark-mode .site-header,
.dark-mode .site-header.is-scrolled { border-bottom-color: rgba(255, 255, 255, .1); background: #09111d; box-shadow: 0 8px 24px rgba(0, 0, 0, .25); }
.dark-mode .primary-navigation { background: #0d1623; }
.dark-mode .brand-logo { background: #f8f8f3; }
.dark-mode .btn-primary { border-color: var(--brand); background: var(--brand); color: #241411; box-shadow: 0 10px 22px rgba(0, 0, 0, .2); }
.dark-mode .btn-primary:hover,.dark-mode .btn-primary:focus { border-color: var(--brand-hover); background: var(--brand-hover); color: #241411; }
.dark-mode .btn-outline-primary { border-color: rgba(255, 171, 153, .55); color: #ffab99; }
.dark-mode .btn-outline-primary:hover,.dark-mode .btn-outline-primary:focus { border-color: #ffab99; background: rgba(255, 139, 115, .13); color: #ffd5cb; }
.dark-mode .btn-secondary { border-color: #e7f1ec; background: #e7f1ec; color: #14201e; }
.dark-mode .btn-light { border-color: var(--border-strong); background: var(--surface); color: var(--text); }
.dark-mode .btn-ghost { color: var(--text-soft); }
.dark-mode .btn-ghost:hover,.dark-mode .btn-ghost.active { background: var(--brand-soft); color: #ffb7a7; }
.dark-mode .form-control,.dark-mode .form-select,.dark-mode .input-group-text,.dark-mode .input-shell { border-color: var(--border-strong); background: var(--surface); color: var(--text); }
.dark-mode .form-control:focus,.dark-mode .form-select:focus,.dark-mode .input-shell:focus-within { border-color: var(--brand); background: #132220; box-shadow: 0 0 0 3px rgba(255, 139, 115, .15); }
.dark-mode .card,.dark-mode .course-card,.dark-mode .feature-card,.dark-mode .dashboard-section,.dark-mode .surface-panel,.dark-mode .admin-detail-panel,.dark-mode .learning-sidebar,.dark-mode .instructor-sidebar,.dark-mode .admin-sidebar,.dark-mode .catalog-controls,.dark-mode .featured-wrap,.dark-mode .test-series-workspace { border-color: var(--border); background: var(--surface); color: var(--text); }
.dark-mode .course-chip,.dark-mode .course-category-label,.dark-mode .role-pill,.dark-mode .test-paper-kind { background: var(--brand-soft); color: #ffb4a3; }
.dark-mode .metric-symbol,.dark-mode .course-instructor > span,.dark-mode .course-value-grid article > span { background: var(--brand-soft); color: var(--brand); }
.dark-mode .catalog-search { border-color: var(--border); background: var(--surface); }
.dark-mode .nav-tabs .nav-link { color: var(--muted); }
.dark-mode .nav-tabs .nav-link:hover { background: var(--surface-subtle); color: var(--text); }
.dark-mode .nav-tabs .nav-link.active { border-color: var(--border) var(--border) var(--surface); background: var(--surface); color: var(--brand); }
.dark-mode .course-overview { background: linear-gradient(135deg, #0d1918, #17312c 62%, #253d35); }
.dark-mode .course-enroll-card { border-color: var(--border); }
.dark-mode .auth-card { border-color: rgba(255, 255, 255, .11); background: rgba(17, 29, 28, .94); }
.dark-mode .auth-heading p,.dark-mode .auth-switch { color: var(--muted); }
.dark-mode .site-footer { background: #09110f; }

@media (max-width: 991.98px) {
  .primary-navigation { border-bottom-color: rgba(255, 255, 255, .12); background: #0d1623; }
  .primary-navigation.is-open { border-bottom-color: rgba(255, 255, 255, .12); }
  .nav-actions { border-top-color: rgba(255, 255, 255, .12); }
}

@media (max-width: 767.98px) {
  .catalog-header h1,.dashboard-heading h1,.admin-heading h1 { letter-spacing: -.045em; }
  .card,.course-card,.feature-card,.dashboard-section,.surface-panel,.admin-detail-panel,.learning-sidebar,.instructor-sidebar,.admin-sidebar,.catalog-controls { border-radius: .9rem; }
}