/*
  NDH Academy — Design Tokens
  Bảng màu Indigo (theo yêu cầu bám sát ảnh mẫu) + font Roboto duy nhất.
  Vẫn tuân thủ color-rules.md: 1 primary + thang neutral trung tính + semantic cố định.
*/

:root {
  /* color / primary — Indigo, dùng cho CTA chính, active state, điểm nhấn */
  --color-primary-50:  #EEF2FF;
  --color-primary-100: #E0E7FF;
  --color-primary-200: #C7D2FE;
  --color-primary-300: #A5B4FC;
  --color-primary-400: #818CF8;
  --color-primary-500: #6366F1;
  --color-primary-600: #4F46E5;
  --color-primary-700: #4338CA;
  --color-primary-800: #3730A3;
  --color-primary-900: #312E81;

  /* color / neutral — xám lạnh trung tính, chiếm phần lớn diện tích */
  --color-neutral-0:   #FFFFFF;
  --color-neutral-50:  #F8FAFC;
  --color-neutral-100: #F1F5F9;
  --color-neutral-200: #E2E8F0;
  --color-neutral-300: #CBD5E1;
  --color-neutral-400: #94A3B8;
  --color-neutral-500: #64748B;
  --color-neutral-600: #475569;
  --color-neutral-700: #334155;
  --color-neutral-800: #1E293B;
  --color-neutral-900: #16192E;
  --color-neutral-950: #0D0F1E;

  /* color / semantic — cố định, không đổi theo brand */
  --color-success: #16A34A;
  --color-warning: #D97706;
  --color-error:   #DC2626;
  --color-info:    #2563EB;

  /* color / category tags — chỉ dùng để phân loại danh mục (không phải màu thương hiệu),
     mỗi cặp gồm nền nhạt + icon đậm cùng tông, tham khảo ảnh mẫu */
  --tag-blue-bg: #E0E7FF;   --tag-blue-fg: #4F46E5;
  --tag-purple-bg: #EDE9FE; --tag-purple-fg: #7C3AED;
  --tag-orange-bg: #FFEDD5; --tag-orange-fg: #EA580C;
  --tag-teal-bg: #CCFBF1;  --tag-teal-fg: #0D9488;
  --tag-rose-bg: #FFE4E6;  --tag-rose-fg: #E11D48;
  --tag-green-bg: #DCFCE7; --tag-green-fg: #16A34A;
  --tag-amber-bg: #FEF3C7; --tag-amber-fg: #D97706;
  --tag-indigo-bg: #E0E7FF; --tag-indigo-fg: #4338CA;

  /* typography — 1 họ font duy nhất (Roboto) cho toàn bộ giao diện */
  --font-heading: 'Roboto', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Roboto', 'Segoe UI', system-ui, sans-serif;

  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-base: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 30px;
  --font-size-4xl: 36px;
  --font-size-5xl: 48px;
  --font-size-6xl: 60px;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 700;
  --font-weight-bold: 900;

  --line-height-body: 1.6;
  --line-height-heading: 1.2;

  /* spacing (bội số 4px) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --space-32: 128px;

  /* radius — kỷ luật 2 cấp, không bo tròn quá lớn */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  /* elevation — nhẹ, có mục đích phân lớp */
  --shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.06);
  --shadow-md: 0 4px 10px -2px rgba(15, 23, 42, 0.10), 0 2px 4px -2px rgba(15, 23, 42, 0.05);
  --shadow-lg: 0 16px 28px -8px rgba(15, 23, 42, 0.16), 0 4px 8px -2px rgba(15, 23, 42, 0.05);
  --shadow-accent: 0 8px 20px -6px rgba(79, 70, 229, 0.35);

  /* motion */
  --duration-micro: 150ms;
  --duration-page: 400ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* semantic aliases dùng trực tiếp trong component */
  --bg-page: var(--color-neutral-0);
  --bg-surface: var(--color-neutral-50);
  --bg-ink: var(--color-neutral-900);
  --border-default: var(--color-neutral-200);
  --text-primary: var(--color-neutral-900);
  --text-secondary: var(--color-neutral-500);
  --text-inverse: var(--color-neutral-0);
  --text-inverse-secondary: rgba(255, 255, 255, 0.68);
  --bg-header: rgba(255, 255, 255, 0.92);
}

/* Dark mode: khong dung den tuyet doi, giam saturation primary nhe (color-rules.md muc 5) */
[data-theme='dark'] {
  --bg-page: var(--color-neutral-950);
  --bg-surface: #12142A;
  --border-default: #262A45;
  --text-primary: var(--color-neutral-0);
  --text-secondary: var(--color-neutral-400);
  --color-primary-500: var(--color-primary-400);

  --shadow-sm: 0 0 0 1px rgba(255, 255, 255, 0.06);
  --shadow-md: 0 0 0 1px rgba(255, 255, 255, 0.08);
  --shadow-lg: 0 0 0 1px rgba(255, 255, 255, 0.10);

  --bg-header: rgba(13, 15, 30, 0.85);
}