/*
 * SIMAKARA LMS design tokens (v1, 20 Oct 2026) — the single source of colour, type, space, radius,
 * elevation, layering and motion for every LMS surface: dashboard, login, payment, Minra AI, Labubu,
 * Daily Dose, Latihan Soal, Try Out.
 *
 * Colours mirror the homepage (app/globals.css :root and .dark, oklch -> sRGB hex). Variables only: no
 * element is styled here, so the file is safe to load on any page. Components live in
 * simakara-components.css; the written guide is docs/lms-design-system.md.
 *
 * Theme: html[data-theme="light" | "dark"] (shared key `simakara_dashboard_theme`, light by default).
 * The learning build rewrites `:root` to `.learning-production` and `html[...]` to `html[...] .learning-production`,
 * so keep theme selectors in the `html[data-theme=...]` form.
 *
 * Contrast contract (checked by test/lms/design-tokens.test.mjs, WCAG 2.2 AA):
 *  - every *-fg / *-ink text token >= 4.5:1 on bg, surface, surface-sunken and on its own *-soft tint;
 *  - on-* text >= 4.5:1 on its solid fill; control borders and focus >= 3:1 on surface.
 *  Brand orange #f97e1f is 2.6:1 against white, so it is a fill/accent colour only: text on it is navy
 *  (--sk-on-primary) and orange text uses --sk-primary-ink.
 */

:root,
html[data-theme="light"] {
	color-scheme: light;

	/* ---- Surfaces (back to front) ---- */
	--sk-bg: #ffffff; /* page canvas (homepage --background) */
	--sk-surface: #ffffff; /* cards, panels (homepage --card) */
	--sk-surface-raised: #ffffff; /* dropdowns, popovers, sticky bars (+ shadow) */
	--sk-surface-sunken: #f3f4f6; /* wells, inputs-on-card, inactive options (homepage --muted) */
	--sk-surface-hover: #f7f7f9; /* hover row / option */
	--sk-overlay: rgb(18 27 43 / 0.45); /* modal scrim */

	/* ---- Text ---- */
	--sk-fg: #121b2b; /* body + headings (navy) 17.4:1 */
	--sk-fg-muted: #4b5363; /* secondary text, labels */
	--sk-fg-subtle: #5f6878; /* captions, placeholders, meta */
	--sk-fg-disabled: #9aa1ad; /* disabled only (exempt) */
	--sk-fg-inverse: #ffffff;

	/* ---- Lines ---- */
	--sk-border: #e2e4e9; /* card / divider */
	--sk-border-strong: #cdd1d9; /* emphasised divider, table header */
	--sk-border-control: #858c99; /* input, select, radio, checkbox: 3.3:1 */

	/* ---- Brand ---- */
	--sk-primary: #f97e1f; /* orange fill, accents, progress */
	--sk-primary-hover: #ff8f3a;
	--sk-primary-active: #e8700f;
	--sk-on-primary: #121b2b; /* text on orange: 6.6:1 */
	--sk-primary-ink: #c2410c; /* orange text, links on white: 5.2:1 */
	--sk-primary-soft: #ffefdb; /* orange tint (homepage --accent) */
	--sk-primary-border: #f6a560;

	--sk-secondary: #5c29a3; /* purple fill (homepage --secondary-foreground) */
	--sk-secondary-hover: #6d35bd;
	--sk-on-secondary: #ffffff; /* 9.1:1 */
	--sk-secondary-ink: #5c29a3;
	--sk-secondary-soft: #f4f0fa; /* purple tint (homepage --secondary) */
	--sk-secondary-border: #c7b2e6;

	/* ---- Status tones: soft (tint bg) / ink (text, icons) / border / solid (fill) / on-solid ---- */
	--sk-success-soft: #e8f6e9;
	--sk-success-ink: #1b6b2a;
	--sk-success-border: #3a9a46;
	--sk-success-solid: #1f7a30;
	--sk-on-success: #ffffff;

	--sk-danger-soft: #fdecec;
	--sk-danger-ink: #b42318;
	--sk-danger-border: #e0484d;
	--sk-danger-solid: #c62828;
	--sk-on-danger: #ffffff;

	--sk-warning-soft: #fff4e0;
	--sk-warning-ink: #8a4108;
	--sk-warning-border: #c98118;
	--sk-warning-solid: #b45309;
	--sk-on-warning: #ffffff;

	--sk-info-soft: #eff6ff; /* homepage --tertiary */
	--sk-info-ink: #1d4ed8;
	--sk-info-border: #4b87f0;
	--sk-info-solid: #2563eb;
	--sk-on-info: #ffffff;

	--sk-neutral-soft: #f3f4f6;
	--sk-neutral-ink: #4b5363;
	--sk-neutral-border: #cdd1d9;
	--sk-neutral-solid: #4b5363;
	--sk-on-neutral: #ffffff;

	/* ---- Focus ---- */
	--sk-focus: #c2410c;
	--sk-focus-ring: 0 0 0 2px var(--sk-bg), 0 0 0 4px var(--sk-focus);

	/* ---- Elevation (homepage shadows, warm shadow colour) ---- */
	--sk-shadow-rgb: 24 6 0;
	--sk-shadow-xs: 0 0 4px 0 rgb(var(--sk-shadow-rgb) / 0.05);
	--sk-shadow-sm: 0 0 4px 0 rgb(var(--sk-shadow-rgb) / 0.08), 0 1px 2px -1px rgb(var(--sk-shadow-rgb) / 0.1);
	--sk-shadow-md: 0 0 4px 0 rgb(var(--sk-shadow-rgb) / 0.08), 0 2px 6px -1px rgb(var(--sk-shadow-rgb) / 0.12);
	--sk-shadow-lg: 0 0 4px 0 rgb(var(--sk-shadow-rgb) / 0.08), 0 8px 16px -4px rgb(var(--sk-shadow-rgb) / 0.16);

	/* ---- Data / charts (homepage --chart-1..5) ---- */
	--sk-chart-1: #f97e1f;
	--sk-chart-2: #8147d1;
	--sk-chart-3: #f06b42;
	--sk-chart-4: #ffba66;
	--sk-chart-5: #583d8f;
}

html[data-theme="dark"] {
	color-scheme: dark;

	/* Homepage .dark: deep purple night, cream text */
	--sk-bg: #0b0812;
	--sk-surface: #120c1d;
	--sk-surface-raised: #1a1328;
	--sk-surface-sunken: #241f2e;
	--sk-surface-hover: #1d1729;
	--sk-overlay: rgb(0 0 0 / 0.7);

	--sk-fg: #fffaf5;
	--sk-fg-muted: #c4bfcd;
	--sk-fg-subtle: #a9a3b4;
	--sk-fg-disabled: #6d6679;
	--sk-fg-inverse: #121b2b;

	--sk-border: #30293d;
	--sk-border-strong: #4a4258;
	--sk-border-control: #7d748c;

	--sk-primary: #f97e1f;
	--sk-primary-hover: #ff8f3a;
	--sk-primary-active: #e8700f;
	--sk-on-primary: #121b2b;
	--sk-primary-ink: #fcb783; /* homepage dark --accent-foreground */
	--sk-primary-soft: #3a2117;
	--sk-primary-border: #c9661d;

	--sk-secondary: #8147d1;
	--sk-secondary-hover: #8b55d5;
	--sk-on-secondary: #ffffff;
	--sk-secondary-ink: #d6c6ec;
	--sk-secondary-soft: #2e1452; /* homepage dark --accent */
	--sk-secondary-border: #6a45a3;

	--sk-success-soft: #112a1a;
	--sk-success-ink: #8ee39a;
	--sk-success-border: #3fb93d;
	--sk-success-solid: #22833a;
	--sk-on-success: #ffffff;

	--sk-danger-soft: #3a1219;
	--sk-danger-ink: #ffaaa8;
	--sk-danger-border: #f04242;
	--sk-danger-solid: #cc3333;
	--sk-on-danger: #ffffff;

	--sk-warning-soft: #33230d;
	--sk-warning-ink: #ffcf8f;
	--sk-warning-border: #d98c2b;
	--sk-warning-solid: #b45309;
	--sk-on-warning: #ffffff;

	--sk-info-soft: #0f1d42;
	--sk-info-ink: #a8c8ff;
	--sk-info-border: #4f86f0;
	--sk-info-solid: #2563eb;
	--sk-on-info: #ffffff;

	--sk-neutral-soft: #241f2e;
	--sk-neutral-ink: #d8d3df;
	--sk-neutral-border: #4a4258;
	--sk-neutral-solid: #4a4258;
	--sk-on-neutral: #ffffff;

	--sk-focus: #fcb783;

	--sk-shadow-rgb: 0 0 0;
	--sk-shadow-xs: 0 0 0 1px rgb(255 255 255 / 0.03);
	--sk-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.4);
	--sk-shadow-md: 0 2px 8px -1px rgb(0 0 0 / 0.5);
	--sk-shadow-lg: 0 10px 24px -6px rgb(0 0 0 / 0.6);

	--sk-chart-2: #9d70db;
	--sk-chart-3: #f27d5a;
	--sk-chart-4: #ffc680;
	--sk-chart-5: #8866cc;
}

/* Theme-independent scales */
:root {
	/* ---- Type: Plus Jakarta Sans for reading, Inter 800/900 for headings (homepage) ---- */
	--sk-font-sans:
		"Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
		sans-serif;
	--sk-font-display: "Inter", "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--sk-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	/*            size                                   / line-height / weight / tracking            */
	--sk-text-display: clamp(1.75rem, 1.25rem + 2.2vw, 2.5rem); /* 28–40px  1.1  900  -0.03em  page hero */
	--sk-text-title-1: clamp(1.5rem, 1.3rem + 0.9vw, 1.875rem); /* 24–30px  1.2  800  -0.02em  page title (h1) */
	--sk-text-title-2: 1.25rem; /* 20px  1.3  800  -0.015em  section title (h2) */
	--sk-text-title-3: 1.0625rem; /* 17px  1.4  700  -0.01em  card title (h3) */
	--sk-text-body-lg: 1.0625rem; /* 17px  1.65 500  question stems, long reading */
	--sk-text-body: 1rem; /* 16px  1.6  400/500  default */
	--sk-text-body-sm: 0.875rem; /* 14px  1.5  500  dense UI, helper text */
	--sk-text-caption: 0.8125rem; /* 13px  1.4  500  meta, timestamps (minimum size) */
	--sk-text-overline: 0.75rem; /* 12px  1.3  700  +0.08em uppercase labels only */

	--sk-leading-tight: 1.15;
	--sk-leading-snug: 1.3;
	--sk-leading-normal: 1.5;
	--sk-leading-relaxed: 1.65;

	/* ---- Space: 4px grid ---- */
	--sk-space-0: 0;
	--sk-space-1: 0.25rem; /* 4 */
	--sk-space-2: 0.5rem; /* 8 */
	--sk-space-3: 0.75rem; /* 12 */
	--sk-space-4: 1rem; /* 16 */
	--sk-space-5: 1.25rem; /* 20 */
	--sk-space-6: 1.5rem; /* 24 */
	--sk-space-8: 2rem; /* 32 */
	--sk-space-10: 2.5rem; /* 40 */
	--sk-space-12: 3rem; /* 48 */
	--sk-space-16: 4rem; /* 64 */

	/* Layout rhythm (homepage site-container / site-section) */
	--sk-gutter: 1rem; /* page side padding: 16 / 24 / 32 */
	--sk-content-max: 72rem; /* 1152px, same as homepage */
	--sk-reading-max: 46rem; /* question + chat column */
	--sk-section-gap: var(--sk-space-6); /* between sections: 24 / 32 */
	--sk-card-pad: var(--sk-space-4); /* inside cards: 16 / 20 / 24 */
	--sk-stack-gap: var(--sk-space-3); /* between siblings in a card */

	/* ---- Radius (homepage --radius 1rem) ---- */
	--sk-radius-xs: 0.375rem; /* 6: tags, kbd */
	--sk-radius-sm: 0.6rem; /* 10: inputs, small buttons */
	--sk-radius-md: 0.8rem; /* 13: options, list rows */
	--sk-radius-lg: 1rem; /* 16: cards */
	--sk-radius-xl: 1.4rem; /* 22: modals, hero cards */
	--sk-radius-pill: 999px; /* buttons, badges, chips */
	--sk-radius: var(--sk-radius-lg);

	/* ---- Control sizes ---- */
	--sk-tap: 44px; /* minimum touch target */
	--sk-control-sm: 36px;
	--sk-control-md: 44px;
	--sk-control-lg: 52px;
	--sk-icon-sm: 16px;
	--sk-icon-md: 20px;
	--sk-icon-lg: 24px;

	/* ---- Layers & sticky ---- */
	--sk-z-base: 0;
	--sk-z-sticky: 20; /* sticky section headers, action bars */
	--sk-z-header: 30; /* app top bar */
	--sk-z-sidebar: 35;
	--sk-z-dropdown: 40; /* menus, selects, popovers */
	--sk-z-overlay: 50; /* scrim */
	--sk-z-modal: 60;
	--sk-z-toast: 70;
	--sk-header-h: 64px; /* app bar height; sticky children use top: var(--sk-sticky-top) */
	--sk-sticky-top: calc(var(--sk-header-h) + var(--sk-space-2));

	/* ---- Motion ---- */
	--sk-dur-fast: 120ms;
	--sk-dur-base: 180ms;
	--sk-dur-slow: 260ms;
	--sk-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
	--sk-ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
}

@media (min-width: 40rem) {
	:root {
		--sk-gutter: 1.5rem;
		--sk-card-pad: var(--sk-space-5);
	}
}

@media (min-width: 64rem) {
	:root {
		--sk-gutter: 2rem;
		--sk-section-gap: var(--sk-space-8);
		--sk-card-pad: var(--sk-space-6);
	}
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--sk-dur-fast: 0ms;
		--sk-dur-base: 0ms;
		--sk-dur-slow: 0ms;
	}
}