/*
 * NusaIQ Malaysia — Malaysian Learning Adventure design tokens
 * Contract: plans/active/nusaiq-total-redesign/01-ui-ux-design-system.md
 *
 * Primitive values are defined once, semantic names are the public API, and
 * the previous Ceria Malaysia names remain as compatibility aliases until all
 * 62 pages have migrated. Pages may consume semantic tokens; game-specific
 * themes may only override the documented --ep-game-* slots.
 */
:root {
  color-scheme: light;

  /* Locked accessible palette. */
  --ep-paper: #FFFDF5;
  --ep-ink: #17233C;
  --ep-muted: #5A6578;
  --ep-forest: #0B6B5F;
  --ep-sky: #1D5FBF;
  --ep-coral: #B63A35;
  --ep-sun: #F6B73C;
  --ep-mint: #D7F2E8;
  --ep-focus: #6D28D9;
  --ep-white: #FFFFFF;
  --ep-line: #C8CED8;
  --ep-line-strong: #7B879A;
  --ep-surface-muted: #F2F4F7;

  /* Semantic color API. Meaning is always reinforced by text/icon/shape. */
  --ep-color-canvas: var(--ep-paper);
  --ep-color-surface: var(--ep-white);
  --ep-color-text: var(--ep-ink);
  --ep-color-text-muted: var(--ep-muted);
  --ep-color-border: var(--ep-line);
  --ep-color-action: var(--ep-forest);
  --ep-color-action-hover: #07564D;
  --ep-color-link: var(--ep-sky);
  --ep-color-danger: var(--ep-coral);
  --ep-color-warning-surface: var(--ep-sun);
  --ep-color-success-surface: var(--ep-mint);
  --ep-color-focus: var(--ep-focus);

  /* Subject accents are navigation, never correctness signals. */
  --ep-subject-math: var(--ep-coral);
  --ep-subject-science: var(--ep-forest);
  --ep-subject-bm: #7A4512;
  --ep-subject-english: var(--ep-sky);
  --ep-subject-general: #765600;
  --ep-subject-history: #7A4512;
  --ep-subject-arabic: #6B4E00;

  /* Locally available fonts. Planned Fredoka/Atkinson require asset-ledger
     approval before these aliases may change. */
  --ep-font-display: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ep-font-body: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ep-font-arabic: "Amiri", "Noto Naskh Arabic", serif;
  --ep-font-mono: ui-monospace, "Cascadia Mono", "Courier New", monospace;

  --ep-text-xs: 0.75rem;
  --ep-text-sm: 0.875rem;
  --ep-text-md: 1rem;
  --ep-text-learner: 1.125rem;
  --ep-text-lg: 1.25rem;
  --ep-text-xl: clamp(1.5rem, 1.2rem + 1.4vw, 2rem);
  --ep-text-display: clamp(2rem, 1.55rem + 2.2vw, 3rem);
  --ep-leading-tight: 1.2;
  --ep-leading-body: 1.55;

  --ep-space-1: 4px;
  --ep-space-2: 8px;
  --ep-space-3: 12px;
  --ep-space-4: 16px;
  --ep-space-6: 24px;
  --ep-space-8: 32px;
  --ep-space-12: 48px;
  --ep-space-16: 64px;

  --ep-radius-1: 8px;
  --ep-radius-2: 12px;
  --ep-radius-3: 20px;
  --ep-radius-round: 999px;
  --ep-target-min: 44px;
  --ep-target-child: 48px;
  --ep-width-reading: 42rem;
  --ep-width-app: 72rem;

  --ep-shadow-1: 0 1px 2px rgba(23, 35, 60, 0.08);
  --ep-shadow-2: 0 8px 24px rgba(23, 35, 60, 0.10);
  --ep-shadow-3: 0 18px 42px rgba(23, 35, 60, 0.14);
  --ep-motion-micro: 160ms;
  --ep-motion-panel: 260ms;
  --ep-motion-celebration: 520ms;
  --ep-ease-standard: cubic-bezier(0.2, 0, 0, 1);

  /* Compatibility aliases for the pre-redesign pages. */
  --ep-primary: var(--ep-forest);
  --ep-primary-light: #147D6F;
  --ep-primary-accent: #1E8A78;
  --ep-primary-dark: #064A43;
  --ep-orange: #9A5000;
  --ep-gold: var(--ep-sun);
  --ep-teal-deep: #164C59;
  --ep-teal: var(--ep-forest);
  --ep-sage: #557A43;
  --ep-text: var(--ep-ink);
  --ep-text-secondary: var(--ep-muted);
  --ep-text-muted: var(--ep-muted);
  --ep-bg: var(--ep-paper);
  --ep-bg-warm: var(--ep-paper);
  --ep-surface: var(--ep-white);
  --ep-border: var(--ep-line);
  --ep-success: var(--ep-forest);
  --ep-error: var(--ep-coral);
  --ep-warning: #765600;
  --ep-info: var(--ep-sky);
  --ep-math: var(--ep-subject-math);
  --ep-sains: var(--ep-subject-science);
  --ep-bm: var(--ep-subject-bm);
  --ep-english: var(--ep-subject-english);
  --ep-umum: var(--ep-subject-general);
  --ep-sejarah: var(--ep-subject-history);
  --ep-radius: var(--ep-radius-3);
  --ep-radius-sm: var(--ep-radius-2);
  --ep-radius-pill: var(--ep-radius-round);
  --ep-shadow: var(--ep-shadow-2);
  --ep-shadow-hover: var(--ep-shadow-3);
  --ep-touch: var(--ep-target-child);
  --ep-font: var(--ep-font-body);
  --ep-max: var(--ep-width-app);
}

/* Focus mode is a quieter projection of the same semantic system. */
[data-ep-mode="focus"] {
  --ep-color-canvas: #FFFFFF;
  --ep-color-surface: #FFFFFF;
  --ep-shadow-1: none;
  --ep-shadow-2: none;
  --ep-shadow-3: none;
  --ep-motion-celebration: 0ms;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body.ep-body {
  margin: 0;
  font-family: var(--ep-font);
  color: var(--ep-text);
  /* Soft fallback if shell bg not used */
  background: var(--ep-color-canvas);
  min-height: 100vh;
  line-height: 1.45;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--ep-color-focus);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --ep-motion-micro: 0.01ms;
    --ep-motion-panel: 0.01ms;
    --ep-motion-celebration: 0.01ms;
  }
}

.ep-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ep-primary);
  text-decoration: none;
  font-weight: 800;
  font-size: 1.05rem;
  padding: 16px 20px;
  min-height: var(--ep-touch);
}

.ep-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--ep-touch);
  padding: 12px 24px;
  border: none;
  border-radius: var(--ep-radius-pill);
  font-family: var(--ep-font);
  font-weight: 800;
  font-size: 1rem;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.2s ease;
  text-decoration: none;
}

.ep-btn:active {
  transform: scale(0.97);
}

.ep-btn-primary {
  background: linear-gradient(135deg, var(--ep-primary-light), var(--ep-primary-accent));
  color: white;
  box-shadow: 0 6px 18px rgba(45, 106, 79, 0.28);
}

.ep-btn-secondary {
  background: white;
  color: var(--ep-primary-dark);
  border: 2px solid var(--ep-border);
}

.ep-btn-gold {
  background: linear-gradient(135deg, var(--ep-gold), #f0d78c);
  color: var(--ep-text);
  box-shadow: 0 6px 18px rgba(233, 196, 106, 0.35);
}

.ep-card {
  background: var(--ep-surface);
  border-radius: var(--ep-radius);
  box-shadow: var(--ep-shadow);
  border: 1px solid rgba(45, 106, 79, 0.06);
}

.ep-batik {
  height: 4px;
  border-radius: 2px;
  background: repeating-linear-gradient(
    90deg,
    var(--ep-coral) 0 20px,
    var(--ep-teal) 20px 40px,
    var(--ep-gold) 40px 60px,
    var(--ep-primary-light) 60px 80px
  );
}

/* ── Subject hub shared layout ── */
.ep-hub-header {
  text-align: center;
  padding: 8px 20px 28px;
}
.ep-hub-header .icon {
  font-size: 68px;
  display: block;
  line-height: 1;
}
.ep-hub-header h1 {
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  margin: 8px 0 4px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ep-primary);
}
.ep-hub-header p {
  color: var(--ep-text-muted);
  font-size: 1.05rem;
  margin: 0;
}
.ep-games {
  max-width: var(--ep-max);
  margin: 0 auto;
  padding: 0 20px 48px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}
.ep-game-card {
  background: var(--ep-surface);
  border-radius: var(--ep-radius);
  padding: 24px;
  text-decoration: none;
  color: var(--ep-text);
  box-shadow: var(--ep-shadow);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
  display: block;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(45, 106, 79, 0.06);
  border-bottom: 5px solid var(--ep-primary-accent);
}
.ep-game-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--ep-shadow-hover);
}
.ep-game-card:active {
  transform: scale(0.98);
}
.ep-game-card .g-icon {
  font-size: 44px;
  margin-bottom: 10px;
  display: block;
}
.ep-game-card h3 {
  font-size: 1.2rem;
  margin: 4px 0;
  font-weight: 800;
  color: var(--ep-text);
}
.ep-game-card .g-desc {
  font-size: 0.92rem;
  color: var(--ep-text-muted);
  line-height: 1.45;
}
.ep-game-card .g-tag {
  display: inline-block;
  background: rgba(45, 106, 79, 0.08);
  color: var(--ep-primary);
  padding: 3px 10px;
  border-radius: var(--ep-radius-pill);
  font-size: 0.75rem;
  font-weight: 700;
  margin: 6px 4px 0 0;
}
.ep-game-card .g-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  background: var(--ep-gold);
  color: var(--ep-text);
  padding: 4px 12px;
  border-radius: var(--ep-radius-pill);
  font-size: 0.75rem;
  font-weight: 800;
}
.ep-game-card.coming-soon {
  opacity: 0.55;
  pointer-events: none;
}
.ep-game-card.coming-soon::after {
  content: "🔜 Akan Datang";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--ep-primary);
  color: white;
  padding: 8px 18px;
  border-radius: var(--ep-radius-pill);
  font-weight: 800;
  font-size: 0.88rem;
  white-space: nowrap;
}
.ep-hub-accent-math { --hub-accent: var(--ep-math); }
.ep-hub-accent-sains { --hub-accent: var(--ep-sains); }
.ep-hub-accent-bm { --hub-accent: var(--ep-bm); }
.ep-hub-accent-english { --hub-accent: var(--ep-english); }
.ep-hub-accent-umum { --hub-accent: var(--ep-umum); }
.ep-hub-accent-sejarah { --hub-accent: var(--ep-sejarah); }
.ep-hub-accent-math .ep-hub-header h1,
.ep-hub-accent-sains .ep-hub-header h1,
.ep-hub-accent-bm .ep-hub-header h1,
.ep-hub-accent-english .ep-hub-header h1,
.ep-hub-accent-umum .ep-hub-header h1,
.ep-hub-accent-sejarah .ep-hub-header h1 {
  color: var(--hub-accent);
}
.ep-hub-accent-math .ep-game-card,
.ep-hub-accent-sains .ep-game-card,
.ep-hub-accent-bm .ep-game-card,
.ep-hub-accent-english .ep-game-card,
.ep-hub-accent-umum .ep-game-card,
.ep-hub-accent-sejarah .ep-game-card {
  border-bottom-color: var(--hub-accent);
}
.ep-hub-accent-math .ep-game-card .g-tag,
.ep-hub-accent-sains .ep-game-card .g-tag,
.ep-hub-accent-bm .ep-game-card .g-tag,
.ep-hub-accent-english .ep-game-card .g-tag,
.ep-hub-accent-umum .ep-game-card .g-tag,
.ep-hub-accent-sejarah .ep-game-card .g-tag {
  color: var(--hub-accent);
  background: color-mix(in srgb, var(--hub-accent) 12%, white);
}
.ep-hub-accent-math .ep-back,
.ep-hub-accent-sains .ep-back,
.ep-hub-accent-bm .ep-back,
.ep-hub-accent-english .ep-back,
.ep-hub-accent-umum .ep-back,
.ep-hub-accent-sejarah .ep-back {
  color: var(--hub-accent);
}