/* ============================================================================
   EduCore Mockups — Design Tokens
   Mirror nguyên `web/src/app/globals.css` để mockup ↔ production 1-1.
   "Tinh tế. Hiện đại." — Electric indigo accent. OKLCH for parity.
   Mobile-first. Light is default; .dark class flips.
   ============================================================================ */

:root {
  /* ---------- Surfaces ---------- */
  --background: 99% 0.002 250;
  --background-elev: 100% 0 0;
  --background-sunken: 96.5% 0.005 250;

  --foreground: 18% 0.012 260;
  --foreground-muted: 46% 0.014 260;
  --foreground-subtle: 58% 0.010 260;

  --card: 100% 0 0;
  --card-foreground: 18% 0.012 260;
  --popover: 100% 0 0;
  --popover-foreground: 18% 0.012 260;

  /* ---------- Brand ---------- */
  --primary: 58% 0.200 265;
  --primary-foreground: 99% 0.002 260;
  --primary-hover: 52% 0.220 265;
  --primary-soft: 95% 0.040 265;
  --primary-fg-on-soft: 40% 0.180 265;

  --secondary: 96.5% 0.005 250;
  --secondary-foreground: 18% 0.012 260;
  --muted: 96.5% 0.005 250;
  --muted-foreground: 46% 0.014 260;
  --accent: 95% 0.040 265;
  --accent-foreground: 40% 0.180 265;

  /* ---------- Semantic ---------- */
  --destructive: 58% 0.200 25;
  --destructive-foreground: 99% 0.002 260;
  --destructive-soft: 95% 0.045 25;
  --success: 60% 0.150 155;
  --success-foreground: 99% 0.002 260;
  --success-soft: 95% 0.045 155;
  --warning: 72% 0.150 75;
  --warning-foreground: 18% 0.060 75;
  --warning-soft: 96% 0.060 80;
  --warning-fg-on-soft: 32% 0.130 75;
  --info: 62% 0.140 230;
  --info-foreground: 99% 0.002 260;
  --info-soft: 95% 0.040 230;

  /* ---------- Borders ---------- */
  --border: 90% 0.006 260;
  --border-strong: 78% 0.010 260;
  --input: 90% 0.006 260;
  --ring: 58% 0.200 265;

  /* ---------- Radius ---------- */
  --radius: 0.625rem;
  --radius-xs: calc(var(--radius) - 6px);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --radius-2xl: calc(var(--radius) + 12px);

  /* ---------- Spacing scale ----------
     4-8-12-16-24-32-48-64. Drop the 14/20 middle values; commit to one rhythm.
     Sections: var(--space-6). Subsections: var(--space-5). Rows: var(--space-3).
     Inline elements: var(--space-2). */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* ---------- Charts ---------- */
  --chart-1: 58% 0.20 265;
  --chart-2: 64% 0.18 195;
  --chart-3: 60% 0.15 155;
  --chart-4: 68% 0.16 70;
  --chart-5: 56% 0.20 330;

  /* ---------- Computed colors (oklch wrappers) ---------- */
  --c-bg: oklch(var(--background));
  --c-bg-elev: oklch(var(--background-elev));
  --c-bg-sunken: oklch(var(--background-sunken));
  --c-fg: oklch(var(--foreground));
  --c-fg-muted: oklch(var(--foreground-muted));
  --c-fg-subtle: oklch(var(--foreground-subtle));
  --c-card: oklch(var(--card));
  --c-card-fg: oklch(var(--card-foreground));
  --c-primary: oklch(var(--primary));
  --c-primary-fg: oklch(var(--primary-foreground));
  --c-primary-hover: oklch(var(--primary-hover));
  --c-primary-soft: oklch(var(--primary-soft));
  --c-primary-fg-on-soft: oklch(var(--primary-fg-on-soft));
  --c-muted: oklch(var(--muted));
  --c-muted-fg: oklch(var(--muted-foreground));
  --c-accent: oklch(var(--accent));
  --c-accent-fg: oklch(var(--accent-foreground));
  --c-destructive: oklch(var(--destructive));
  --c-destructive-soft: oklch(var(--destructive-soft));
  --c-success: oklch(var(--success));
  --c-success-soft: oklch(var(--success-soft));
  --c-warning: oklch(var(--warning));
  --c-warning-soft: oklch(var(--warning-soft));
  --c-warning-fg-on-soft: oklch(var(--warning-fg-on-soft));
  --c-info: oklch(var(--info));
  --c-info-soft: oklch(var(--info-soft));
  --c-border: oklch(var(--border));
  --c-border-strong: oklch(var(--border-strong));
  --c-ring: oklch(var(--ring));
}

.dark {
  --background: 13% 0.010 260;
  --background-elev: 20% 0.012 260;
  --background-sunken: 9% 0.008 260;
  --foreground: 97% 0.005 260;
  --foreground-muted: 76% 0.014 260;
  --foreground-subtle: 64% 0.014 260;
  --card: 20% 0.012 260;
  --card-foreground: 97% 0.005 260;
  --popover: 20% 0.012 260;
  --popover-foreground: 97% 0.005 260;
  --primary: 70% 0.180 265;
  --primary-foreground: 14% 0.010 260;
  --primary-hover: 76% 0.180 265;
  --primary-soft: 30% 0.085 265;
  --primary-fg-on-soft: 88% 0.140 265;
  --secondary: 20% 0.012 260;
  --secondary-foreground: 97% 0.005 260;
  --muted: 16% 0.010 260;
  --muted-foreground: 76% 0.014 260;
  --accent: 30% 0.085 265;
  --accent-foreground: 88% 0.140 265;
  --destructive: 72% 0.190 25;
  --destructive-foreground: 14% 0.010 260;
  --destructive-soft: 30% 0.090 25;
  --success: 74% 0.150 155;
  --success-foreground: 14% 0.010 260;
  --success-soft: 28% 0.060 155;
  --warning: 80% 0.150 80;
  --warning-foreground: 18% 0.060 75;
  --warning-soft: 30% 0.070 80;
  --warning-fg-on-soft: 90% 0.130 80;
  --info: 74% 0.140 230;
  --info-foreground: 14% 0.010 260;
  --info-soft: 28% 0.055 230;
  --border: 32% 0.014 260;
  --border-strong: 46% 0.016 260;
  --input: 32% 0.014 260;
  --ring: 70% 0.180 265;
}

/* ============================================================================
   Base
   ============================================================================ */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.55;
  background: var(--c-bg);
  color: var(--c-fg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Type scale — mobile-first: 24/20/16, desktop bumps H1/H2 up. */
h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0;
}
h1 { font-size: 1.5rem;    letter-spacing: -0.03em;  line-height: 1.15; }  /* 24 mobile */
h2 { font-size: 1.25rem;   letter-spacing: -0.02em;  line-height: 1.2;  }  /* 20 mobile */
h3 { font-size: 1rem;      letter-spacing: -0.015em; line-height: 1.3;  }  /* 16 */
@media (min-width: 768px) {
  h1 { font-size: 1.75rem;  letter-spacing: -0.035em; line-height: 1.1; }  /* 28 desktop */
  h2 { font-size: 1.375rem; letter-spacing: -0.025em; line-height: 1.15; } /* 22 desktop */
}

/* Lead paragraph — pairs with H1. 16px so it has clear contrast over body 14px. */
.lead {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--c-fg-muted);
}

/* em is semantic emphasis only — no decorative color. Keeps headings monochrome. */
em {
  font-style: normal;
  color: inherit;
  font-weight: inherit;
}

p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; font-size: inherit; }

::selection {
  background: var(--c-primary-soft);
  color: var(--c-primary-fg-on-soft);
}

/* ============================================================================
   Mono utility
   ============================================================================ */
.mono, code, kbd {
  font-family: "Geist Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo,
    Consolas, "Liberation Mono", monospace;
}

kbd {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 6px;
  border: 1px solid var(--c-border);
  border-bottom-width: 2px;
  border-radius: var(--radius-xs);
  background: var(--c-card);
  font-size: 11px;
  font-weight: 500;
  color: var(--c-fg-muted);
}