/* =========================================================================
   EduOne · Greenie — DESIGN TOKENS
   =========================================================================
   Nguồn chân lý duy nhất cho màu sắc, typography, khoảng cách, bo góc, đổ bóng.
   Mọi component phải dùng biến ở đây — không hardcode màu/số trong component.

   Bản sắc: xanh sinh thái (tái chế) + tím công nghệ (AI/robot) + hổ phách năng
   lượng (thực hành STEAM). Thông điệp: rác -> học liệu, code -> robot.
   ========================================================================= */

:root {
    /* ---------- Màu thương hiệu ---------- */
    /* Primary: xanh sinh thái */
    --c-primary-50:  #ecfdf5;
    --c-primary-100: #d1fae5;
    --c-primary-200: #a7f3d0;
    --c-primary-300: #6ee7b7;
    --c-primary-400: #34d399;
    --c-primary-500: #10b981;   /* base */
    --c-primary-600: #059669;
    --c-primary-700: #047857;
    --c-primary-800: #065f46;

    /* Tech: tím công nghệ (AI, lập trình, robot) */
    --c-tech-100: #e0e7ff;
    --c-tech-300: #a5b4fc;
    --c-tech-500: #6366f1;
    --c-tech-600: #4f46e5;
    --c-tech-700: #4338ca;

    /* Energy: hổ phách (thực hành, tái chế) */
    --c-energy-100: #fef3c7;
    --c-energy-400: #fbbf24;
    --c-energy-500: #f59e0b;
    --c-energy-600: #d97706;

    /* ---------- Trung tính (slate) ---------- */
    --c-bg:        #f6f8fa;
    --c-surface:   #ffffff;
    --c-surface-2: #f8fafc;
    --c-border:    #e2e8f0;
    --c-border-2:  #cbd5e1;
    --c-text:      #0f172a;
    --c-text-2:    #475569;
    --c-text-3:    #94a3b8;
    --c-text-on:   #ffffff;

    /* ---------- Ngữ nghĩa (state) ---------- */
    --c-success:   #10b981;
    --c-success-bg:#ecfdf5;
    --c-warning:   #f59e0b;
    --c-warning-bg:#fffbeb;
    --c-danger:    #ef4444;
    --c-danger-bg: #fef2f2;
    --c-info:      #3b82f6;
    --c-info-bg:   #eff6ff;

    /* ---------- Gradient thương hiệu ---------- */
    --grad-primary: linear-gradient(135deg, var(--c-primary-500), var(--c-primary-700));
    --grad-hero:    linear-gradient(135deg, #065f46 0%, #047857 40%, #4f46e5 100%);
    --grad-tech:    linear-gradient(135deg, var(--c-tech-500), var(--c-tech-700));

    /* ---------- Typography ---------- */
    --font-sans: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'Cascadia Code', ui-monospace, 'Fira Code', Consolas, monospace;

    --fs-xs:   0.75rem;
    --fs-sm:   0.875rem;
    --fs-base: 1rem;
    --fs-lg:   1.125rem;
    --fs-xl:   1.25rem;
    --fs-2xl:  1.5rem;
    --fs-3xl:  1.875rem;
    --fs-4xl:  2.5rem;
    --fs-5xl:  3.25rem;

    --fw-normal: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-extra: 800;

    --lh-tight: 1.2;
    --lh-normal: 1.55;

    /* ---------- Khoảng cách (thang 4px) ---------- */
    --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
    --s-5: 20px;  --s-6: 24px;  --s-8: 32px;  --s-10: 40px;
    --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px;

    /* ---------- Bo góc ---------- */
    --r-sm: 8px;
    --r:    12px;
    --r-lg: 16px;
    --r-xl: 24px;
    --r-full: 999px;

    /* ---------- Đổ bóng ---------- */
    --sh-sm: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.08);
    --sh-md: 0 4px 12px rgba(15, 23, 42, 0.08);
    --sh-lg: 0 12px 32px rgba(15, 23, 42, 0.12);
    --sh-primary: 0 8px 24px rgba(16, 185, 129, 0.28);

    /* ---------- Layout ---------- */
    --container: 1200px;
    --container-narrow: 880px;
    --nav-h: 68px;

    /* ---------- Chuyển động ---------- */
    --t-fast: 120ms ease;
    --t: 200ms cubic-bezier(0.4, 0, 0.2, 1);
    --t-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);

    /* ---------- Focus ---------- */
    --focus-ring: 0 0 0 3px rgba(99, 102, 241, 0.4);
}

/* Tôn trọng người dùng tắt hiệu ứng chuyển động */
@media (prefers-reduced-motion: reduce) {
    * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}