/* tokens.css - Design tokens (CSS custom properties)
   Ported exactly from tokens.jsx (Khac Dau Nam Viet).
   Contains only :root rules and a media query adjusting --container-pad. */

/* Design Tokens */
:root {
  /* Brand - T.primary / T.primaryDark / T.accent / T.accentDark */
  --color-primary:      #C8102E;
  --color-primary-dark: #9E0C24;
  --color-accent:       #F59E0B;
  --color-accent-dark:  #D97706;

  /* Neutrals - T.bg / T.bgSoft / T.bgWarm / T.border / T.borderSoft */
  --color-bg:           #FFFFFF;
  --color-bg-soft:      #F7F8FA;
  --color-bg-warm:      #FAF7F2;
  --color-border:       #E5E7EB;
  --color-border-soft:  #F1F2F4;

  /* Text - T.text / T.textMuted / T.textSoft */
  --color-text:         #1F2937;
  --color-text-muted:   #6B7280;
  --color-text-soft:    #9CA3AF;

  /* Footer / dark - T.footerBg / T.footerText / T.footerMuted */
  --color-footer-bg:    #14181F;
  --color-footer-text:  #D1D5DB;
  --color-footer-muted: #9CA3AF;

  /* Semantic */
  --color-success:      #16A34A;
  --color-success-bg:   #DCFCE7;
  --color-info:         #2563EB;
  --color-info-bg:      #DBEAFE;
  --color-warn:         #F59E0B;
  --color-danger:       #DC2626;
  --color-error:        #DC2626;

  /* Zalo - T.zalo */
  --color-zalo:         #0068FF;

  /* Aliases for backward compat */
  --color-bg-alt:       #F7F8FA;   /* = bg-soft */
  --color-navy:         #14181F;   /* = footer-bg */
  --color-navy-light:   #1E2430;

  /* Typography - T.font */
  --font-sans: 'Be Vietnam Pro', system-ui, -apple-system, sans-serif;
  --font-display: 'Playfair Display', 'Be Vietnam Pro', sans-serif;

  --font-size-xs:   0.75rem;    /* 12px */
  --font-size-sm:   0.875rem;   /* 14px */
  --font-size-base: 1rem;       /* 16px */
  --font-size-lg:   1.125rem;   /* 18px */
  --font-size-xl:   1.25rem;    /* 20px */
  --font-size-2xl:  1.5rem;     /* 24px */
  --font-size-3xl:  1.875rem;   /* 30px */
  --font-size-4xl:  2.25rem;    /* 36px */
  --line-height-tight:  1.25;
  --line-height-normal: 1.6;
  --line-height-loose:  1.8;

  /* Spacing (8pt grid) */
  --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 */

  /* Border-radius - T.r4...r16...r999 */
  --radius-4:   4px;
  --radius-6:   6px;
  --radius-8:   8px;
  --radius-10:  10px;
  --radius-12:  12px;
  --radius-16:  16px;
  --radius-full: 9999px;
  /* Semantic aliases */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  10px;
  --radius-xl:  12px;

  /* Shadows - ported from T.shadowSm / T.shadow / T.shadowMd / T.shadowLg */
  --shadow-sm: 0 1px 2px rgba(15,23,42,0.06), 0 1px 3px rgba(15,23,42,0.04);
  --shadow:    0 4px 12px rgba(15,23,42,0.06), 0 1px 2px rgba(15,23,42,0.04);
  --shadow-md: 0 8px 24px rgba(15,23,42,0.08), 0 2px 4px rgba(15,23,42,0.04);
  --shadow-lg: 0 16px 48px rgba(15,23,42,0.12), 0 4px 8px rgba(15,23,42,0.04);
  /* Backward compat aliases */
  --shadow-xl: 0 16px 48px rgba(15,23,42,0.12), 0 4px 8px rgba(15,23,42,0.04);

  /* Layout */
  --container-max:  1320px;
  --container-pad:  var(--space-4);
  --topbar-height:  36px;
  --header-height:  82px;   /* 18px top/bot padding + 44px logo/icon */
  --nav-height:     48px;
  --sidebar-width:  260px;
  --transition:     0.15s ease;
}

/* Container padding responsive */
@media (min-width: 640px) {
  :root { --container-pad: var(--space-6); }
}

@media (min-width: 1024px) {
  :root { --container-pad: var(--space-8); }
}