@import url("/css/dark-palette-aa0afae36f99df333d5992e14a466771.css");
/* JLAS design tokens - Komorebi light palette (tím + xanh lá). */
:root {
  color-scheme: light;
  /* Sao đánh giá / yêu thích: một màu chung cho mọi trang. */
  --color-star: #f5a400;
  /* Surfaces */
  --color-surface-lowest: #ffffff;
  --color-surface: #f4fafd;
  --color-surface-low: #eef5f7;
  --color-surface-mid: #e8eff1;
  --color-surface-high: #e2e9ec;
  --color-background: #f4fafd;
  --color-surface-container: #e8eff1;
  --color-surface-container-high: #e2e9ec;
  --color-surface-variant: #dde4e6;
  --color-inverse-surface: #2b3234;

  /* Text */
  --color-on-surface: #161d1f;
  --color-on-surface-variant: #494551;

  /* Brand */
  --color-primary: #4f378a;
  --color-primary-container: #6750a4;
  --color-on-primary: #ffffff;
  --color-on-primary-container: #e0d2ff;
  --color-primary-fixed: #e9ddff;
  --color-on-primary-fixed: #22005d;
  --color-inverse-primary: #cfbcff;
  --color-secondary: #63597c;
  --color-secondary-container: #e1d4fd;
  --color-secondary-fixed: #e9ddff;
  --color-secondary-fixed-dim: #cdc0e9;

  /* Komorebi accent */
  --color-tertiary: #765b00;
  --color-tertiary-container: #c9a74d;
  --color-on-tertiary: #ffffff;
  --color-on-tertiary-container: #503d00;
  --color-tertiary-fixed-dim: #e7c365;

  /* Borders and status */
  --color-outline: #7a7582;
  --color-outline-variant: #cbc4d2;
  --color-error: #ba1a1a;
  --color-error-container: #ffdad6;
  --color-on-error-container: #93000a;
  --color-on-error: #ffffff;
  --color-success: #006947;
  --color-success-bg: #d6f5e7;
  --color-focus: #4f378a;

  /* Typography — single project-wide font, matching the nav bar (--font-body); the site
     previously mixed in a serif headline face and a monospace face, which is why headings
     and labels looked different from the nav. --font-headline/--font-display/--font-mono now
     just alias --font-body so every page renders with one typeface. */
  --font-body: -apple-system-body, ui-sans-serif, -apple-system, system-ui, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
  --font-headline: var(--font-body);
  --font-display: var(--font-body);
  --font-mono: var(--font-body);
  --font-size-base: 14px;
  --font-weight-base: 400;
  --line-height-base: 20px;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 2rem;
  --text-4xl: 2.75rem;

  /* Spacing and shape - unchanged layout tokens */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --radius-sm: 0.375rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-full: 9999px;
  --radius-control: 0.625rem;

  /* Quiet elevation for light surfaces */
  --shadow-1: 0 4px 20px rgba(22, 29, 31, 0.08);
  --shadow-2: 0 10px 40px rgba(22, 29, 31, 0.14);
  --shadow-action: 0 4px 14px rgba(79, 55, 138, 0.18);
  --shadow-action-hover: 0 6px 20px rgba(79, 55, 138, 0.24);
  --focus-ring: 0 0 0 3px rgba(79, 55, 138, 0.16);

  --header-height: 72px;
  --sidebar-width: 260px;
  --max-width: 1400px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-short: 180ms;
  --dur-medium: 300ms;
  --transition: var(--dur-medium) var(--ease-out);
  --z-background: -1;
  --z-header: 50;
  --z-sidebar: 45;
  --z-modal: 100;
  --z-toast: 110;
  --z-overlay: 120;

  /* Shared background aliases used by older modules. */
  --bg-gradient-static: linear-gradient(135deg, #f4fafd 0%, #eef5f7 64%, #e9ddff 100%);
  --bg-gradient-animated: linear-gradient(135deg, #f4fafd 0%, #eef5f7 64%, #e9ddff 100%);
}

@keyframes jlas-bg-pan {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* Stitch learning journey. Scoped so existing non-learning screens keep their palette. */
html:has(body.journey-ui) {
  --color-primary: #7c3aed;
  --color-primary-container: #6d28d9;
  --color-on-primary: #ffffff;
  --color-on-primary-container: #ffffff;
  --color-primary-fixed: #f3eaff;
  --color-secondary-container: #f3eaff;
  --color-secondary-fixed-dim: #d8b4fe;
  --color-background: #f8fafc;
  --color-surface: #f8fafc;
  --color-surface-lowest: #ffffff;
  --color-surface-low: #f8fafc;
  --color-surface-mid: #f1f5f9;
  --color-surface-high: #e2e8f0;
  --color-surface-container: #f1f5f9;
  --color-surface-container-high: #e2e8f0;
  --color-on-surface: #172033;
  --color-on-surface-variant: #64748b;
  --color-secondary: #64748b;
  --color-outline: #718096;
  --color-outline-variant: #e2e8f0;
  --color-success: #4d7c0f;
  --color-success-bg: #f2fce3;
  --color-journey-action: #a3e635;
  --color-on-journey-action: #172400;
  --color-journey-grid: #7c3aed08;
  --color-journey-glow: #a3e63526;
  /* [font unification] journey-ui pages used to swap in Hanken Grotesk/Inter here, which is
     why they didn't match the nav either; -apple-system-body etc. is the nav's literal stack
     (can't reference --font-body via var() here since this block also redefines that property). */
  --font-headline: -apple-system-body, ui-sans-serif, -apple-system, system-ui, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
  --font-body: -apple-system-body, ui-sans-serif, -apple-system, system-ui, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
}
html[data-theme="dark"]:has(body.journey-ui) {
  --color-primary: #c084fc;
  --color-primary-container: #a855f7;
  --color-on-primary: #20102e;
  --color-on-primary-container: #160724;
  --color-primary-fixed: #292239;
  --color-secondary-container: #292239;
  --color-secondary-fixed-dim: #66418a;
  --color-background: #0b0d13;
  --color-surface: #10131d;
  --color-surface-lowest: #171b26;
  --color-surface-low: #10131d;
  --color-surface-mid: #202534;
  --color-surface-high: #2a3041;
  --color-surface-container: #202534;
  --color-surface-container-high: #2a3041;
  --color-on-surface: #f5f6fa;
  --color-on-surface-variant: #a0aec0;
  --color-secondary: #a0aec0;
  --color-outline: #8693a8;
  --color-outline-variant: #2b3040;
  --color-success: #a3e635;
  --color-success-bg: #222e1a;
  --color-journey-grid: #a855f709;
}

/* ── Dark theme (tím + xanh lá) — toggled via data-theme on <html> ── */
html[data-theme="dark"] {
  color-scheme: dark;
  --color-star: #ffc94a;

  /* Surfaces */
  --color-surface-lowest: #141218;
  --color-surface: #1d1b20;
  --color-surface-low: #211f26;
  --color-surface-mid: #2a2631;
  --color-surface-high: #2a2631;
  --color-background: #141218;
  --color-surface-container: #211f26;
  --color-surface-container-high: #2a2631;
  --color-surface-variant: #48434f;
  --color-inverse-surface: #e8e3ec;

  /* Text */
  --color-on-surface: #e6e1ea;
  --color-on-surface-variant: #cbc6d2;

  /* Brand (tím) */
  --color-primary: #d3bcff;
  --color-primary-container: #4f378a;
  --color-on-primary: #33106d;
  --color-on-primary-container: #ecdfff;
  --color-primary-fixed: #30263f;
  --color-on-primary-fixed: #ecdfff;
  --color-inverse-primary: #4f378a;
  --color-secondary: #cec2dc;
  --color-secondary-container: #4c4559;
  --color-secondary-fixed: #30263f;
  --color-secondary-fixed-dim: #cdc0e9;

  /* Komorebi accent */
  --color-tertiary: #e2bc6b;
  --color-tertiary-container: #4a3d00;
  --color-on-tertiary: #3d3200;
  --color-on-tertiary-container: #f0db9a;
  --color-tertiary-fixed-dim: #e7c365;

  /* Borders and status (xanh lá = success) */
  --color-outline: #948f9b;
  --color-outline-variant: #48434f;
  --color-error: #ffb4ab;
  --color-error-container: #8c1d18;
  --color-on-error-container: #ffdad6;
  --color-on-error: #690005;
  --color-success: #7ad5a0;
  --color-success-bg: #103a24;
  --color-focus: #d3bcff;

  /* Quiet elevation for dark surfaces */
  --shadow-1: 0 4px 20px rgba(0, 0, 0, 0.42);
  --shadow-2: 0 10px 40px rgba(0, 0, 0, 0.58);
  --shadow-action: 0 4px 14px rgba(211, 188, 255, 0.16);
  --shadow-action-hover: 0 6px 20px rgba(211, 188, 255, 0.22);
  --focus-ring: 0 0 0 3px rgba(211, 188, 255, 0.28);

  --bg-gradient-static: linear-gradient(135deg, #141218 0%, #1d1b20 64%, #241a3a 100%);
  --bg-gradient-animated: linear-gradient(135deg, #141218 0%, #1d1b20 64%, #241a3a 100%);
}