/* ============================================================
   VinFast Đông Sài Gòn — Design Tokens
   CHỈ chứa :root CSS variables. Không viết rule nào khác.
   Tất cả component/layout đều import file này đầu tiên.
   ============================================================ */

@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: optional;
}

@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: optional;
}

@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: optional;
}

@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: optional;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/jetbrains-mono-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: optional;
}

:root {
  /* ── Brand Colors ─────────────────────────────────────── */
  --color-brand-primary:    #004B99;   /* Future Blue */
  --color-brand-deep:       #001D4E;   /* Deep Navy */
  --color-brand-electric:   #0072E5;   /* Sky Electric — links, hover */
  --color-brand-light:      #EBF4FF;   /* Light tint for backgrounds */

  --color-cta-primary:      #FF6B00;   /* Signal Orange — CTA chính */
  --color-cta-hover:        #E55A00;
  --color-cta-active:       #CC5000;

  /* ── Neutral ──────────────────────────────────────────── */
  --color-surface:          #FFFFFF;
  --color-surface-alt:      #F7F8FA;
  --color-surface-elevated: #FFFFFF;
  --color-border:           #E2E6EC;
  --color-border-strong:    #C9D1DC;

  --color-text-primary:     #0D1117;
  --color-text-secondary:   #4A5568;
  --color-text-muted:       #718096;
  --color-text-inverse:     #FFFFFF;

  /* ── Semantic ─────────────────────────────────────────── */
  --color-success:          #16A34A;
  --color-success-bg:       #F0FDF4;
  --color-warning:          #D97706;
  --color-warning-bg:       #FFFBEB;
  --color-error:            #DC2626;
  --color-error-bg:         #FEF2F2;
  --color-info:             #0072E5;
  --color-info-bg:          #EFF6FF;

  /* ── Overlay ──────────────────────────────────────────── */
  --color-overlay-dark:     rgba(0, 29, 78, 0.72);
  --color-overlay-medium:   rgba(0, 29, 78, 0.50);
  --color-overlay-light:    rgba(255, 255, 255, 0.92);

  /* ── Typography ───────────────────────────────────────── */
  --font-display: 'Inter', system-ui, -apple-system, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', 'Cascadia Code', 'Fira Code', monospace;

  /* Scale (Major Third — 1.25) */
  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  1.875rem;   /* 30px */
  --text-4xl:  2.25rem;    /* 36px */
  --text-5xl:  3rem;       /* 48px */
  --text-6xl:  3.75rem;    /* 60px */

  /* Weight */
  --font-normal:    400;
  --font-medium:    500;
  --font-semibold:  600;
  --font-bold:      700;
  --font-extrabold: 800;

  /* Line height */
  --leading-none:    1;
  --leading-tight:   1.25;
  --leading-snug:    1.375;
  --leading-normal:  1.5;
  --leading-relaxed: 1.625;
  --leading-loose:   2;

  /* Letter spacing */
  --tracking-tight:  -0.025em;
  --tracking-normal:  0;
  --tracking-wide:    0.025em;
  --tracking-wider:   0.05em;
  --tracking-widest:  0.1em;

  /* ── Spacing (4px base) ───────────────────────────────── */
  --space-px:  1px;
  --space-0-5: 0.125rem;  /* 2px */
  --space-1:   0.25rem;   /* 4px */
  --space-2:   0.5rem;    /* 8px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-14:  3.5rem;    /* 56px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */
  --space-28:  7rem;      /* 112px */
  --space-32:  8rem;      /* 128px */

  /* ── Layout ───────────────────────────────────────────── */
  --container-max:      1280px;
  --container-wide:     1440px;
  --container-narrow:   720px;
  --container-px:       1.25rem;   /* padding sides mobile */
  --container-px-md:    2rem;      /* padding sides tablet+ */

  /* ── Border Radius ────────────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* ── Shadows — tinted with Deep Navy, not pure black ─── */
  --shadow-xs:  0 1px 2px rgba(0, 29, 78, 0.06);
  --shadow-sm:  0 1px 3px rgba(0, 29, 78, 0.09), 0 1px 2px rgba(0, 29, 78, 0.05);
  --shadow-md:  0 4px 12px rgba(0, 29, 78, 0.09), 0 2px 4px rgba(0, 29, 78, 0.06);
  --shadow-lg:  0 8px 24px rgba(0, 29, 78, 0.11), 0 4px 8px rgba(0, 29, 78, 0.07);
  --shadow-xl:  0 16px 48px rgba(0, 29, 78, 0.13), 0 8px 16px rgba(0, 29, 78, 0.08);
  --shadow-2xl: 0 24px 64px rgba(0, 29, 78, 0.17);
  --shadow-inset: inset 0 2px 4px rgba(0, 29, 78, 0.07);

  /* Brand shadow (CTA button) */
  --shadow-brand:  0 4px 16px rgba(255, 107, 0, 0.30);
  --shadow-brand-lg: 0 8px 32px rgba(255, 107, 0, 0.40);

  /* ── Transitions ──────────────────────────────────────── */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;
  --transition-bounce: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Z-index ──────────────────────────────────────────── */
  --z-below:     -1;
  --z-base:       0;
  --z-raised:    10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;

  /* ── Section Spacing ──────────────────────────────────── */
  --section-py:    var(--space-16);   /* 64px default */
  --section-py-sm: var(--space-12);   /* 48px compact */
  --section-py-lg: var(--space-24);   /* 96px hero-like */
}

/* ── Dark mode overrides (future-proof) ─────────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    /* Chỉ enable nếu cần dark mode. Hiện tại site sáng. */
    /* --color-surface: #0d1117; */
  }
}