/*
 * SIMAKARA brand layer (shared by landing, LMS dashboard and payment).
 * Mirrors the landing page tokens (landing app/globals.css :root, oklch -> sRGB hex)
 * so plain-CSS pages read as the same brand.
 *
 * Load the fonts first (one <link> per page):
 *   <link rel="preconnect" href="https://fonts.googleapis.com">
 *   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 *   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@800;900&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap">
 *   <link rel="stylesheet" href="/brand/simakara-tokens.css">
 *   <link rel="stylesheet" href="/brand/simakara-brand.css">
 *   <link rel="stylesheet" href="/brand/simakara-components.css">
 *
 * Accessibility (WCAG AA, enforced by test/lms/design-tokens.test.mjs; brand orange #f97e1f is 2.6:1 on white):
 *  - orange fills carry navy text (--sk-on-primary, 6.6:1), never white;
 *  - orange text uses --sk-primary-ink (5.2:1 light, 11:1 dark); --sk-primary-strong is an alias of it;
 *  - --sk-accent is the soft orange tint (--sk-primary-soft);
 *  - focus: --sk-focus with a background-coloured gap (--sk-focus-ring).
 */
/*
 * Tokens now live in simakara-tokens.css (load it first; components: simakara-components.css).
 * The names below are the pre-v1 aliases still used by dashboard.css and login.html; new code uses the
 * --sk-* names from simakara-tokens.css directly. They follow the light/dark theme because they alias.
 */
:root {
  --sk-background: var(--sk-bg);
  --sk-foreground: var(--sk-fg);
  --sk-card: var(--sk-surface);
  --sk-muted: var(--sk-surface-sunken);
  --sk-muted-ink: var(--sk-fg-muted);
  --sk-muted-foreground: var(--sk-fg-subtle);
  --sk-accent: var(--sk-primary-soft);
  --sk-accent-foreground: var(--sk-primary-ink);
  --sk-primary-strong: var(--sk-primary-ink);
  --sk-secondary-foreground: var(--sk-secondary-ink);
  --sk-input: var(--sk-border-control);
  --sk-ring: var(--sk-focus);
  --sk-destructive: var(--sk-danger-border);
  --sk-destructive-ink: var(--sk-danger-ink);
  --sk-success: var(--sk-success-border);
  --sk-purple: var(--sk-chart-2);
  --sk-purple-deep: var(--sk-chart-5);
  --sk-amber: var(--sk-chart-4);
  --sk-radius-2xl: 1.8rem;
  --sk-shadow-xl: var(--sk-shadow-lg);
}

/* ---- Base typography (low specificity so page CSS can override) ---- */
:where(html) { -webkit-text-size-adjust: 100%; }
:where(body) {
  font-family: var(--sk-font-sans);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--sk-foreground);
  background: var(--sk-background);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
:where(h1, h2, h3, .sk-display) {
  font-family: var(--sk-font-display);
  font-weight: 900;
  letter-spacing: -.02em;
  line-height: 1.15;
  color: var(--sk-foreground);
}
:where(button, input, select, textarea) { font-family: inherit; }
::selection { background: var(--sk-accent); color: var(--sk-foreground); }

/* Visible focus ring everywhere (keyboard) */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible:not([class*="sk-"]) {
  outline: 2px solid var(--sk-focus);
  outline-offset: 2px;
}

/* ---- Eyebrow: small italic orange-outlined pill ---- */
.sk-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .375rem .875rem;
  border: 1px solid var(--sk-primary);
  border-radius: var(--sk-radius-pill);
  background: var(--sk-accent);
  color: var(--sk-primary-ink);
  font-family: var(--sk-font-display);
  font-size: .875rem;
  font-weight: 600;
  font-style: italic;
  line-height: 1.2;
}

/* ---- Headline: big Inter 900, one orange line via <em> ---- */
.sk-headline {
  margin: 0;
  font-family: var(--sk-font-display);
  font-weight: 900;
  font-size: clamp(1.75rem, 5.5vw, 2.75rem);
  letter-spacing: -.03em;
  line-height: 1.1;
  color: var(--sk-foreground);
  text-wrap: balance;
}
.sk-headline em {
  display: block;
  font-style: normal;
  color: var(--sk-primary-strong);
}

/* Buttons, cards and form controls: simakara-components.css (.sk-btn, .sk-card, …). */

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}