/* Delu Academy · design tokens
   3 lớp: (1) gốc → (2) ngữ nghĩa → (3) component (khai báo ngay tại component trong base.css).
   Component chỉ được dùng lớp 2 và 3. Không viết mã màu trong component. */

@property --p { syntax: "<number>"; inherits: true; initial-value: 0; }

:root {
  /* ───────── 1. GỐC ───────── */
  --gray-0: #ffffff; --gray-50: #fafafc; --gray-100: #f5f5f7; --gray-200: #e8e8ed; --gray-300: #d2d2d7;
  --gray-400: #a1a1a6; --gray-500: #86868b; --gray-600: #6e6e73; --gray-700: #424245; --gray-800: #1d1d1f;
  --gray-850: #17171c; --gray-900: #0b0b0f;

  --iris-300: #b3b3ff; --iris-400: #8c8cff; --iris-500: #5b5bf7; --iris-600: #4a4ae0;
  --indigo-600: #2a3bff; --blue-500: #1e6bff; --blue-400: #1e8cff; --aqua-400: #19d9c8; --mint-500: #19d3a2;
  --sun-400: #ffc02e; --coral-500: #ff7a3d; --red-500: #ff4d4d; --pink-500: #ff3d8b; --magenta-600: #d81b72;
  --green-600: #18794e; --green-400: #3ddc97; --amber-700: #b45309; --amber-400: #ffb84d; --red-600: #d92d20; --red-400: #ff6b61;

  --font-sans: "Be Vietnam Pro", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --fs-display: clamp(2.75rem, 1.1rem + 6.8vw, 6.75rem);
  --fs-h1: clamp(2.25rem, 1.4rem + 3.4vw, 4rem);
  --fs-h2: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem);
  --fs-h3: clamp(1.25rem, 1.12rem + .55vw, 1.5rem);
  --fs-lead: clamp(1.125rem, 1.02rem + .45vw, 1.3125rem);
  --fs-body: 1.0625rem; --fs-sm: .9375rem; --fs-xs: .8125rem;
  --lh-display: 1.08; --lh-heading: 1.18; --lh-body: 1.58;
  --tracking-display: -.038em; --tracking-heading: -.022em;

  --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem; --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-8: 2rem;
  --sp-10: 2.5rem; --sp-12: 3rem; --sp-16: 4rem; --sp-20: 5rem; --sp-24: 6rem; --sp-32: 8rem;
  --r-sm: .5rem; --r-md: .75rem; --r-lg: 1rem; --r-xl: 1.5rem; --r-2xl: 2rem; --r-pill: 999px;

  --dur-1: 120ms; --dur-2: 220ms; --dur-3: 360ms; --dur-4: 560ms; --dur-5: 900ms;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in: cubic-bezier(.4, 0, 1, 1);
  --ease-inout: cubic-bezier(.65, 0, .35, 1);
  --ease-soft: cubic-bezier(.3, 1.2, .4, 1);   /* vật to: vọt nhẹ 2% rồi đứng */
  --ease-pop: cubic-bezier(.34, 1.56, .64, 1); /* vật nhỏ: huy hiệu, dấu tích */

  --container: 75rem; --container-narrow: 46rem; --gutter: clamp(1rem, 4vw, 2rem);
  --section-y: clamp(5rem, 9vw, 8.5rem);
  --nav-h: 3.5rem;
  --z-nav: 50; --z-sheet: 60; --z-modal: 70; --z-toast: 80;

  /* ───────── 2. NGỮ NGHĨA (sáng) ───────── */
  color-scheme: light;
  --bg: var(--gray-0); --bg-soft: var(--gray-100); --surface: var(--gray-0); --surface-2: var(--gray-50);
  --surface-inverse: var(--gray-800); --text-inverse: var(--gray-100);
  --text: var(--gray-800); --text-2: var(--gray-600); --text-3: var(--gray-500);
  --line: rgba(0, 0, 0, .09); --line-strong: var(--gray-300);
  --accent: var(--iris-500); --accent-hover: var(--iris-600); --accent-soft: #efefff; --on-accent: #ffffff;
  --focus: var(--iris-500);
  --success: var(--green-600); --success-soft: #e7f6ee;
  --warning: var(--amber-700); --warning-soft: #fdf3e3;
  --danger: var(--red-600); --danger-soft: #fdecea;
  --glass: rgba(255, 255, 255, .74); --scrim: rgba(11, 11, 15, .44);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .04), 0 2px 8px rgba(0, 0, 0, .04);
  --shadow-2: 0 2px 4px rgba(0, 0, 0, .04), 0 12px 32px rgba(0, 0, 0, .08);
  --shadow-3: 0 4px 8px rgba(0, 0, 0, .04), 0 28px 64px -12px rgba(11, 11, 40, .2);

  --grad-spectrum: linear-gradient(90deg, var(--iris-500), var(--blue-400), var(--mint-500), var(--sun-400), var(--coral-500), var(--pink-500));
  --grad-text: linear-gradient(92deg, var(--iris-500) 0%, var(--blue-500) 34%, var(--magenta-600) 70%, #ff5a3d 100%);

  /* Vật thể cố định màu ở cả 2 giao diện: giấy chứng chỉ, khối mã, chữ trên thẻ khoá. */
  --paper: #ffffff; --paper-ink: #1d1d1f; --paper-ink-2: #6e6e73; --paper-line: rgba(0, 0, 0, .1);
  --code-bg: #0f1016; --code-fg: #e6e6ee; --code-dim: #8b8ba0; --code-key: #9db4ff; --code-str: #7fe0c3;
  --on-pass: #ffffff; --pass-chip: rgba(0, 0, 0, .32); --pass-shade: rgba(8, 10, 40, .5);

  /* Bản sắc khoá học. Thêm khoá mới = thêm 1 nhóm ở đây + 1 khối [data-course] cuối tệp. */
  --grad-dive: linear-gradient(135deg, var(--indigo-600) 0%, var(--blue-400) 54%, var(--aqua-400) 100%);
  --ink-dive: #1f5cff; --tone-dive: var(--ink-dive); --soft-dive: #edf3ff; --glow-dive: rgba(30, 107, 255, .34);
  --pattern-dive: repeating-radial-gradient(circle at 108% 112%, rgba(255, 255, 255, .17) 0 1px, transparent 1px 7cqw);
  --grad-assistant: linear-gradient(135deg, var(--magenta-600) 0%, var(--red-500) 52%, #ff8a3d 100%);
  --ink-assistant: #d6246e; --tone-assistant: var(--ink-assistant); --soft-assistant: #fff0f4; --glow-assistant: rgba(255, 61, 110, .32);
  --pattern-assistant: repeating-conic-gradient(from 180deg at 104% -6%, rgba(255, 255, 255, .16) 0 1deg, transparent 1deg 7deg);
}

/* ───────── 2b. NGỮ NGHĨA (tối) ───────── */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: var(--gray-900); --bg-soft: #131318; --surface: var(--gray-850); --surface-2: #1f1f26;
  --surface-inverse: var(--gray-100); --text-inverse: var(--gray-800);
  --text: var(--gray-100); --text-2: var(--gray-400); --text-3: var(--gray-500);
  --line: rgba(255, 255, 255, .12); --line-strong: rgba(255, 255, 255, .26);
  --accent: var(--iris-400); --accent-hover: var(--iris-300); --accent-soft: rgba(140, 140, 255, .16); --on-accent: var(--gray-900);
  --focus: var(--iris-300);
  --success: var(--green-400); --success-soft: rgba(61, 220, 151, .14);
  --warning: var(--amber-400); --warning-soft: rgba(255, 184, 77, .14);
  --danger: var(--red-400); --danger-soft: rgba(255, 107, 97, .14);
  --glass: rgba(14, 14, 18, .74); --scrim: rgba(0, 0, 0, .62);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .4), 0 2px 8px rgba(0, 0, 0, .3);
  --shadow-2: 0 2px 4px rgba(0, 0, 0, .4), 0 12px 32px rgba(0, 0, 0, .45);
  --shadow-3: 0 4px 8px rgba(0, 0, 0, .4), 0 28px 64px -12px rgba(0, 0, 0, .7);
  --grad-text: linear-gradient(92deg, var(--iris-400) 0%, #5aa2ff 34%, #ff6fae 70%, #ff8a5c 100%);
  --tone-dive: #7aa6ff; --soft-dive: rgba(30, 107, 255, .16);
  --tone-assistant: #ff7aa8; --soft-assistant: rgba(255, 61, 139, .15);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: var(--gray-900); --bg-soft: #131318; --surface: var(--gray-850); --surface-2: #1f1f26;
    --surface-inverse: var(--gray-100); --text-inverse: var(--gray-800);
    --text: var(--gray-100); --text-2: var(--gray-400); --text-3: var(--gray-500);
    --line: rgba(255, 255, 255, .12); --line-strong: rgba(255, 255, 255, .26);
    --accent: var(--iris-400); --accent-hover: var(--iris-300); --accent-soft: rgba(140, 140, 255, .16); --on-accent: var(--gray-900);
    --focus: var(--iris-300);
    --success: var(--green-400); --success-soft: rgba(61, 220, 151, .14);
    --warning: var(--amber-400); --warning-soft: rgba(255, 184, 77, .14);
    --danger: var(--red-400); --danger-soft: rgba(255, 107, 97, .14);
    --glass: rgba(14, 14, 18, .74); --scrim: rgba(0, 0, 0, .62);
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .4), 0 2px 8px rgba(0, 0, 0, .3);
    --shadow-2: 0 2px 4px rgba(0, 0, 0, .4), 0 12px 32px rgba(0, 0, 0, .45);
    --shadow-3: 0 4px 8px rgba(0, 0, 0, .4), 0 28px 64px -12px rgba(0, 0, 0, .7);
    --grad-text: linear-gradient(92deg, var(--iris-400) 0%, #5aa2ff 34%, #ff6fae 70%, #ff8a5c 100%);
    --tone-dive: #7aa6ff; --soft-dive: rgba(30, 107, 255, .16);
    --tone-assistant: #ff7aa8; --soft-assistant: rgba(255, 61, 139, .15);
  }
}

/* Phạm vi khoá học: mọi component bên trong tự đổi màu theo khoá. */
[data-course="dive"]   { --course-grad: var(--grad-dive);   --course-tone: var(--tone-dive);   --course-ink: var(--ink-dive);   --course-soft: var(--soft-dive);   --course-glow: var(--glow-dive);   --course-pattern: var(--pattern-dive); }
[data-course="assistant"] { --course-grad: var(--grad-assistant); --course-tone: var(--tone-assistant); --course-ink: var(--ink-assistant); --course-soft: var(--soft-assistant); --course-glow: var(--glow-assistant); --course-pattern: var(--pattern-assistant); }