/* ========================================================= DESIGN TOKENS Theming is three-state. `` is stamped by ThemeContext on every render, and index.html stamps it again inline before first paint so there's no flash of the wrong theme. - `:root` → the complete light palette - `@media (prefers-color-scheme: dark)` guarded by `:root:not([data-theme='light'])` → dark for anyone following their OS, without overriding an explicit light choice - `:root[data-theme='dark']` → an explicit dark choice wins even on a light-mode OS Every colour gets its definition in plain `:root` first; the dark blocks only *redefine*. Nothing may be defined solely inside a media/attribute block, or it goes undefined in the other theme. ========================================================= */ :root { /* --- Brand accent ------------------------------------------------- Tenant-scoped pages overwrite --tenant-accent once the tenant loads (see TenantContext). Everything downstream is derived from it with color-mix so a tenant picking magenta doesn't break the rest of the palette. */ --tenant-accent: #4f46e5; --tenant-accent-contrast: #ffffff; --accent-2: #0ea5e9; --accent-3: #f59e0b; --accent-soft: color-mix(in srgb, var(--tenant-accent) 12%, transparent); --accent-softer: color-mix(in srgb, var(--tenant-accent) 7%, transparent); --accent-ring: color-mix(in srgb, var(--tenant-accent) 28%, transparent); --accent-gradient: linear-gradient(135deg, var(--tenant-accent), var(--accent-2)); --accent-gradient-warm: linear-gradient(135deg, var(--tenant-accent), #a855f7 60%, #ec4899); /* --- Surfaces (light) --------------------------------------------- */ --bg: #f6f7fb; --bg-tint-1: color-mix(in srgb, var(--tenant-accent) 7%, transparent); --bg-tint-2: color-mix(in srgb, var(--accent-2) 6%, transparent); --surface: #ffffff; --surface-2: #fbfbfe; --surface-hover: #f1f2f8; --surface-sunken: #eef0f6; --border: #e4e6ef; --border-strong: #d2d5e3; /* --- Text (light) -------------------------------------------------- */ --text-h: #12152a; --text: #4d5468; --text-muted: #858ba1; --text-faint: #a8adbf; /* --- Status -------------------------------------------------------- */ --danger: #dc2626; --danger-bg: rgba(220, 38, 38, 0.1); --success: #059669; --success-bg: rgba(5, 150, 105, 0.12); --warning: #d97706; --warning-bg: rgba(217, 119, 6, 0.13); --info: #0284c7; --info-bg: rgba(2, 132, 199, 0.12); /* --- Elevation ------------------------------------------------------ */ --shadow-sm: 0 1px 2px rgba(18, 21, 42, 0.05), 0 1px 3px rgba(18, 21, 42, 0.04); --shadow-md: 0 4px 12px -2px rgba(18, 21, 42, 0.08), 0 12px 32px -8px rgba(18, 21, 42, 0.1); --shadow-lg: 0 8px 24px -4px rgba(18, 21, 42, 0.1), 0 24px 56px -12px rgba(18, 21, 42, 0.16); --shadow-glow: 0 6px 20px -6px color-mix(in srgb, var(--tenant-accent) 55%, transparent); --shadow-glow-lg: 0 12px 36px -8px color-mix(in srgb, var(--tenant-accent) 60%, transparent); /* Hairline highlight along a card's top edge — near-invisible in light, does the real elevation work in dark. */ --inset-hi: inset 0 1px 0 rgba(255, 255, 255, 0.6); /* --- Geometry -------------------------------------------------------- */ --radius-xs: 6px; --radius-sm: 9px; --radius-md: 13px; --radius-lg: 18px; --radius-xl: 26px; --radius-full: 999px; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --text-xs: 12px; --text-sm: 13px; --text-base: 15px; --text-md: 16px; --text-lg: 20px; --text-xl: 28px; --sans: 'Inter', system-ui, 'Segoe UI', Roboto, sans-serif; --heading: 'Plus Jakarta Sans', 'Inter', system-ui, 'Segoe UI', Roboto, sans-serif; --mono: ui-monospace, 'JetBrains Mono', Consolas, monospace; --ease: cubic-bezier(0.32, 0.72, 0.28, 1); font: 15px/1.55 var(--sans); color: var(--text); background: var(--bg); font-synthesis: none; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Dark, for anyone on the default 'system' preference. Guarded so an explicit light choice isn't overridden on a dark-mode OS. */ @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { --bg: #0a0c17; --bg-tint-1: color-mix(in srgb, var(--tenant-accent) 16%, transparent); --bg-tint-2: color-mix(in srgb, var(--accent-2) 12%, transparent); --surface: #12152a; --surface-2: #161a32; --surface-hover: #1d2240; --surface-sunken: #0e1122; --border: #262b4a; --border-strong: #343a5e; --text-h: #f2f3fb; --text: #a9b0cc; --text-muted: #737a99; --text-faint: #565d7a; --danger: #f87171; --danger-bg: rgba(248, 113, 113, 0.14); --success: #34d399; --success-bg: rgba(52, 211, 153, 0.14); --warning: #fbbf24; --warning-bg: rgba(251, 191, 36, 0.14); --info: #38bdf8; --info-bg: rgba(56, 189, 248, 0.14); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 12px -2px rgba(0, 0, 0, 0.5), 0 12px 32px -8px rgba(0, 0, 0, 0.45); --shadow-lg: 0 8px 24px -4px rgba(0, 0, 0, 0.55), 0 24px 56px -12px rgba(0, 0, 0, 0.5); --inset-hi: inset 0 1px 0 rgba(255, 255, 255, 0.05); } } /* An explicit dark choice — wins regardless of the OS setting. */ :root[data-theme='dark'] { --bg: #0a0c17; --bg-tint-1: color-mix(in srgb, var(--tenant-accent) 16%, transparent); --bg-tint-2: color-mix(in srgb, var(--accent-2) 12%, transparent); --surface: #12152a; --surface-2: #161a32; --surface-hover: #1d2240; --surface-sunken: #0e1122; --border: #262b4a; --border-strong: #343a5e; --text-h: #f2f3fb; --text: #a9b0cc; --text-muted: #737a99; --text-faint: #565d7a; --danger: #f87171; --danger-bg: rgba(248, 113, 113, 0.14); --success: #34d399; --success-bg: rgba(52, 211, 153, 0.14); --warning: #fbbf24; --warning-bg: rgba(251, 191, 36, 0.14); --info: #38bdf8; --info-bg: rgba(56, 189, 248, 0.14); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 12px -2px rgba(0, 0, 0, 0.5), 0 12px 32px -8px rgba(0, 0, 0, 0.45); --shadow-lg: 0 8px 24px -4px rgba(0, 0, 0, 0.55), 0 24px 56px -12px rgba(0, 0, 0, 0.5); --inset-hi: inset 0 1px 0 rgba(255, 255, 255, 0.05); } * { box-sizing: border-box; } html, body { margin: 0; height: 100%; } body { background: var(--bg); color: var(--text); } /* Two soft accent washes anchored to the top corners, fixed so they don't travel with scroll. This is what stops large empty regions from reading as flat dead grey — it's the page's only ambient graphic, and it costs no image request. */ body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(900px 500px at 12% -8%, var(--bg-tint-1), transparent 70%), radial-gradient(760px 460px at 92% 2%, var(--bg-tint-2), transparent 72%); } #root { min-height: 100vh; } h1, h2, h3, h4 { font-family: var(--heading); font-weight: 700; color: var(--text-h); margin: 0; line-height: 1.2; letter-spacing: -0.02em; } h1 { font-size: 30px; letter-spacing: -0.035em; } h2 { font-size: 21px; } h3 { font-size: 16px; font-weight: 650; letter-spacing: -0.01em; } h4 { font-size: 14px; font-weight: 650; letter-spacing: 0; } p { margin: 0; } a { color: var(--tenant-accent); text-decoration: none; transition: color 0.15s var(--ease); } a:hover { text-decoration: underline; } button, input, select, textarea { font-family: inherit; } /* A visible, consistent keyboard ring everywhere — the previous `outline: none` on inputs left keyboard users with nothing at all on some controls. */ :focus-visible { outline: 2px solid var(--tenant-accent); outline-offset: 2px; border-radius: var(--radius-xs); } code { font-family: var(--mono); font-size: 0.88em; padding: 2px 6px; border-radius: var(--radius-xs); background: var(--surface-sunken); border: 1px solid var(--border); color: var(--text-h); } /* Icons sit on the text baseline by default, which knocks them a couple of pixels low inside buttons and nav rows. */ .icon { display: block; flex-shrink: 0; } ::selection { background: color-mix(in srgb, var(--tenant-accent) 25%, transparent); color: var(--text-h); } /* Scrollbars, so dark mode doesn't get a bright chrome-coloured gutter down the side of every scrollable panel. */ * { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--radius-full); border: 3px solid transparent; background-clip: content-box; } *::-webkit-scrollbar-thumb:hover { background: var(--text-faint); background-clip: content-box; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ========================================================= COPY LOCK (desktop app only) Set by useCopyProtection on . Selection is what makes copying possible in the first place, so removing it is the quieter half of the block — the event handlers are the rest. ========================================================= */ :root[data-copy-locked='true'] body { -webkit-user-select: none; user-select: none; } /* Anything a student legitimately types into stays fully usable — passwords, invite codes, search boxes, doubt questions. /
 and [data-copyable] are exempt too: they carry the
   Razorpay webhook URL, the DNS verification token and invite links,
   which an owner has to be able to select. Keep this list in step with
   COPYABLE in useCopyProtection.ts. */
:root[data-copy-locked='true'] input,
:root[data-copy-locked='true'] textarea,
:root[data-copy-locked='true'] [contenteditable=''],
:root[data-copy-locked='true'] [contenteditable='true'],
:root[data-copy-locked='true'] code,
:root[data-copy-locked='true'] pre,
:root[data-copy-locked='true'] [data-copyable] {
  -webkit-user-select: text;
  user-select: text;
}

/* Long-press on a touchscreen otherwise pops the OS text-selection
   callout, which offers Copy straight back. */
:root[data-copy-locked='true'] body {
  -webkit-touch-callout: none;
}

/* Images are not covered by user-select; this stops the drag-to-desktop
   route out for lesson diagrams and slides. */
:root[data-copy-locked='true'] img {
  -webkit-user-drag: none;
  user-drag: none;
}
/* =========================================================
   NAVTAAR LMS — root-domain landing page
   =========================================================

   Every rule is scoped under `.nlp`. That is load-bearing, not tidiness:
   the source design used bare `nav {}`, `footer {}` and `body::before`
   selectors, and this app already has a `