/* =====================================================================
   NOORANIYAH — THEME LAYER
   Loaded last so it wins the cascade. Everything here is either a
   light-mode ("paper") correction or an accent-on-paper rule.
   Design rule: on paper, every accent surface is DARK and its text is
   white; every accent text is dark enough for 4.5:1 on white.
   ===================================================================== */

[data-theme="light"] {
  /* accent presets re-tuned for white paper */
  --accent-soft: color-mix(in srgb, var(--accent) 12%, transparent);
  --accent-line: color-mix(in srgb, var(--accent) 30%, transparent);
}
[data-theme="light"][data-accent="mint"] { --accent: #04795a; }
[data-theme="light"][data-accent="violet"] { --accent: #4a2fc4; }
[data-theme="light"][data-accent="sky"] { --accent: #0a6ba3; }
[data-theme="light"][data-accent="gold"] { --accent: #8a5c00; }
[data-theme="light"][data-accent="rose"] { --accent: #b62b46; }

/* ------------------------------------------------------------ SURFACES */
[data-theme="light"] .grain { opacity: 0.3; mix-blend-mode: multiply; }
[data-theme="light"] .sidebar { background: linear-gradient(185deg, #ffffff, #f3f6fd); }
[data-theme="light"] .topbar { background: var(--header-bg); }
[data-theme="light"] .dropdown__panel,
[data-theme="light"] .palette__panel { background: linear-gradient(170deg, #ffffff, #f5f8ff); }
[data-theme="light"] .card,
[data-theme="light"] .panel,
[data-theme="light"] .stat-card,
[data-theme="light"] .kpi { box-shadow: var(--shadow-sm); }
[data-theme="light"] .sidebar__brand-name { color: var(--text-100); }
[data-theme="light"] .sidebar__brand-role { color: var(--mint-500); }
[data-theme="light"] .nav-group__label { color: var(--text-400); }
[data-theme="light"] .nav-item { color: var(--text-300); }
[data-theme="light"] .nav-item:hover { background: rgb(var(--tint-rgb) / 0.05); color: var(--text-100); }
[data-theme="light"] .nav-item.is-active { color: #ffffff; }
[data-theme="light"] .nav-item.is-active svg { color: #ffffff; }
[data-theme="light"] .nav-item__badge { background: rgba(182, 43, 70, 0.12); color: #a82340; border-color: rgba(182, 43, 70, 0.28); }
[data-theme="light"] .tabs { background: rgb(var(--tint-rgb) / 0.05); }
[data-theme="light"] .tab { color: var(--text-300); }
[data-theme="light"] .tab.is-active { color: #ffffff; }
[data-theme="light"] .timeline__time,
[data-theme="light"] .tiny,
[data-theme="light"] .muted { color: var(--text-400); }
[data-theme="light"] .live-pill { color: #ffffff; }
[data-theme="light"] .live-pill__dot { background: #ffffff; }
[data-theme="light"] .cd-cell { background: #ffffff; box-shadow: var(--shadow-sm); }
[data-theme="light"] .cd-cell__num { color: var(--mint-500); }
[data-theme="light"] .meter { background: rgb(var(--tint-rgb) / 0.08); }
[data-theme="light"] .chip { background: rgb(var(--tint-rgb) / 0.05); color: var(--text-300); }
[data-theme="light"] .field,
[data-theme="light"] .input,
[data-theme="light"] .select,
[data-theme="light"] .textarea { background: #ffffff; border-color: rgb(var(--tint-rgb) / 0.14); color: var(--text-100); }
[data-theme="light"] .textarea:focus,
[data-theme="light"] .input:focus { background: #ffffff; }
[data-theme="light"] .att-pill span { color: var(--text-300); }

/* ------------------------------------------------------- BUTTONS / BADGES */
[data-theme="light"] .btn--primary {
  --btn-fg: #ffffff;
  background-image: linear-gradient(112deg,
    color-mix(in srgb, var(--accent) 92%, #000000),
    var(--accent) 58%,
    color-mix(in srgb, var(--accent) 74%, #000000));
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.18);
  box-shadow: 0 14px 30px -16px rgba(15, 23, 42, 0.4);
}
[data-theme="light"] .btn--primary svg { color: #ffffff; }
[data-theme="light"] .btn--primary::after { background: linear-gradient(112deg, color-mix(in srgb, var(--accent) 80%, #000000), var(--accent) 60%, color-mix(in srgb, var(--accent) 70%, #000000)); }
[data-theme="light"] .btn--ghost,
[data-theme="light"] .btn--outline { color: var(--text-200); border-color: rgb(var(--tint-rgb) / 0.16); }
[data-theme="light"] .btn--ghost:hover,
[data-theme="light"] .btn--outline:hover { color: var(--text-100); background: rgb(var(--tint-rgb) / 0.05); }

[data-theme="light"] .badge--success { background: rgba(4, 121, 90, 0.12); color: #046a4f; border-color: rgba(4, 121, 90, 0.28); }
[data-theme="light"] .badge--warning { background: rgba(138, 92, 0, 0.12); color: #6f4a00; border-color: rgba(138, 92, 0, 0.28); }
[data-theme="light"] .badge--danger { background: rgba(182, 43, 70, 0.12); color: #96203a; border-color: rgba(182, 43, 70, 0.28); }
[data-theme="light"] .badge--info { background: rgba(10, 107, 163, 0.12); color: #085a88; border-color: rgba(10, 107, 163, 0.26); }
[data-theme="light"] .badge--violet { background: rgba(74, 47, 196, 0.12); color: #3f28ab; border-color: rgba(74, 47, 196, 0.26); }
[data-theme="light"] .badge--neutral { background: rgb(var(--tint-rgb) / 0.06); color: var(--text-300); }

[data-theme="light"] .alert--success { background: rgba(4, 121, 90, 0.09); color: #045437; border-color: rgba(4, 121, 90, 0.26); }
[data-theme="light"] .alert--error,
[data-theme="light"] .alert--danger { background: rgba(182, 43, 70, 0.09); color: #7d1a2f; border-color: rgba(182, 43, 70, 0.26); }
[data-theme="light"] .alert--warning { background: rgba(138, 92, 0, 0.09); color: #5f3f00; border-color: rgba(138, 92, 0, 0.26); }
[data-theme="light"] .alert--info { background: rgba(10, 107, 163, 0.09); color: #08517a; border-color: rgba(10, 107, 163, 0.24); }

/* ------------------------------------------------------ LANDING / HERO */
[data-theme="light"] .eyebrow { color: color-mix(in srgb, var(--accent) 88%, #041b12); }
[data-theme="light"] .nav__link { color: var(--text-300); }
[data-theme="light"] .nav__link.is-active { color: #ffffff; background: var(--accent); }
[data-theme="light"] .announce__inner { color: #045c41; }
[data-theme="light"] .announce__link { color: #045c41; border-color: rgba(4, 92, 65, 0.35); }
[data-theme="light"] .flash-card__sub { color: color-mix(in srgb, var(--accent) 82%, #06110d); }
[data-theme="light"] .flash-card { background: linear-gradient(160deg, #ffffff, #f1f5fd); border-color: rgb(var(--tint-rgb) / 0.12); }
[data-theme="light"] .course-option input:checked + .course-option__box .course-option__name { color: #04543c; }
[data-theme="light"] .course-option__box { background: #ffffff; }
[data-theme="light"] .glass,
[data-theme="light"] .hero-visual__frame { background: rgba(255, 255, 255, 0.72); border-color: rgb(var(--tint-rgb) / 0.1); }
[data-theme="light"] .marquee::before,
[data-theme="light"] .marquee::after { --tw-gradient-from: #f7f8fc; }

/* ------------------------------------------------------------- AUTH */
[data-theme="light"] .auth-aside {
  background:
    radial-gradient(520px 320px at 20% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%),
    radial-gradient(520px 320px at 90% 100%, rgba(74, 47, 196, 0.14), transparent 62%),
    linear-gradient(170deg, #eef3fd, #e3ebf8);
  border-right-color: rgb(var(--tint-rgb) / 0.12);
}
[data-theme="light"] .auth-aside .brand__name,
[data-theme="light"] .auth-aside h2 { color: var(--text-100); }
[data-theme="light"] .auth-aside .brand__tag,
[data-theme="light"] .auth-aside small,
[data-theme="light"] .auth-aside .label { color: var(--text-400); }
[data-theme="light"] .auth-form-side { background: #ffffff; }
[data-theme="light"] .demo-chip,
[data-theme="light"] .demo-cred { background: rgba(255, 255, 255, 0.8); border-color: rgb(var(--tint-rgb) / 0.12); }
[data-theme="light"] .demo-chip code,
[data-theme="light"] .demo-cred code { color: var(--mint-500); }

/* --------------------------------------------------------- SCROLLBARS */
[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(15, 23, 42, 0.22); }
[data-theme="light"] ::selection { background: color-mix(in srgb, var(--accent) 24%, transparent); color: #04120c; }

/* hero display type: dark ink gradient on paper */
[data-theme="light"] .hero__title .ch {
  background: linear-gradient(175deg, #10193a 22%, #33415c 62%, #5a6884 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
[data-theme="light"] .hero__title .ch--accent {
  background: linear-gradient(170deg, #04795a, #0a6ba3 55%, #4a2fc4);
  -webkit-background-clip: text;
  background-clip: text;
}
/* floating hero chips become paper glass instead of obsidian glass */
[data-theme="light"] .float-card {
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.95), rgba(245, 248, 254, 0.92));
  border-color: rgb(var(--tint-rgb) / 0.12);
  box-shadow: 0 18px 40px -22px rgba(15, 23, 42, 0.35);
}
[data-theme="light"] .float-card__label { color: var(--text-500); }
[data-theme="light"] .float-card__value { color: var(--text-100); }
[data-theme="light"] .float-card__icon { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
[data-theme="light"] .float-card--violet .float-card__icon { background: rgba(74, 47, 196, 0.12); color: #4a2fc4; }
[data-theme="light"] .float-card--gold .float-card__icon { background: rgba(138, 92, 0, 0.12); color: #7a5200; }

/* floating utilities */
[data-theme="light"] .to-top,
[data-theme="light"] .wa-float {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgb(var(--tint-rgb) / 0.14);
  color: var(--text-200);
  box-shadow: 0 14px 34px -18px rgba(15, 23, 42, 0.3);
}
[data-theme="light"] .to-top:hover,
[data-theme="light"] .wa-float:hover { color: var(--text-100); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
[data-theme="light"] .nav-item.is-active .nav-item__badge { background: rgba(255, 255, 255, 0.22); color: #ffffff; }
[data-theme="light"] body.sidebar-open::after { background: rgba(15, 23, 42, 0.42); }

/* ================================================ ADMIN APPEARANCE PICKERS */
.theme-picker { display: flex; gap: 10px; flex-wrap: wrap; }
.theme-picker__opt {
  flex: 1 1 120px;
  display: grid;
  gap: 8px;
  padding: 10px;
  border-radius: var(--r-sm);
  border: 1px solid var(--hairline-strong);
  background: var(--surface-1);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease-out), transform var(--dur-fast) var(--ease-spring), box-shadow var(--dur) var(--ease-out);
  text-align: left;
}
.theme-picker__opt:hover { transform: translateY(-2px); border-color: var(--accent); }
.theme-picker__opt.is-active { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 26%, transparent); }
.theme-picker__preview {
  display: block;
  height: 52px;
  border-radius: 8px;
  border: 1px solid rgb(var(--tint-rgb) / 0.12);
  position: relative;
  overflow: hidden;
}
.theme-picker__preview::before {
  content: '';
  position: absolute;
  inset: 0 62% 0 0;
  background: rgba(255, 255, 255, 0.14);
}
.theme-picker__preview--dark { background: linear-gradient(160deg, #0b0f1c, #04050a); }
.theme-picker__preview--light { background: linear-gradient(160deg, #ffffff, #eef2fa); }
.theme-picker__preview--light::before { background: rgba(15, 23, 42, 0.07); }
.theme-picker__preview--system { background: linear-gradient(100deg, #04050a 0 50%, #f4f7fd 50% 100%); }
.theme-picker__name { font-size: 0.8rem; font-weight: 600; color: var(--text-200); }
.theme-picker__opt.is-active .theme-picker__name { color: var(--text-100); }

.accent-picker { display: flex; gap: 8px; flex-wrap: wrap; }
.accent-picker__opt {
  flex: 0 0 auto;
  min-width: 98px;
  justify-content: center;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--hairline-strong);
  background: var(--surface-1);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-300);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-spring), border-color var(--dur), color var(--dur);
}
.accent-picker__opt:hover { transform: translateY(-2px); color: var(--text-100); }
.accent-picker__opt.is-active { border-color: currentColor; color: var(--text-100); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 24%, transparent); }
.accent-picker__dot { width: 13px; height: 13px; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.12); }
.accent-picker__opt--mint .accent-picker__dot { background: #12e2a3; }
.accent-picker__opt--violet .accent-picker__dot { background: #7c5cff; }
.accent-picker__opt--sky .accent-picker__dot { background: #38bdf8; }
.accent-picker__opt--gold .accent-picker__dot { background: #f5c469; }
.accent-picker__opt--rose .accent-picker__dot { background: #fb7185; }

.color-field { display: flex; align-items: center; gap: 10px; }
.color-field input[type="color"] { width: 46px; height: 38px; padding: 2px; border-radius: 10px; border: 1px solid var(--hairline-strong); background: var(--surface-1); }
.image-preview { margin-top: 8px; max-height: 54px; border-radius: 8px; border: 1px solid var(--hairline); }

.field__hint.setting-key { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.02em; opacity: 0.75; }