/* =====================================================================
   HIMACAKE - Design Tokens (v3.3-responsive)
   Typography in rem scales with OS/browser font size (accessible).
   ===================================================================== */
:root{
  /* Brand colors */
  --color-primary:        #F4B41A;   /* vàng kem */
  --color-primary-dark:   #D89A00;
  --color-primary-light:  #FFF3D0;
  --color-secondary:      #3E2723;   /* nâu socola */
  --color-accent:         #E91E63;   /* hồng đỏ - Sale, Hot */

  /* Neutrals */
  --color-text:           #1f1f1f;
  --color-text-soft:      #4a4a4a;
  --color-text-muted:     #8a8a8a;
  --color-border:         #e5e5e5;
  --color-border-soft:    #f0f0f0;
  --color-bg:             #ffffff;
  --color-bg-soft:        #fafafa;
  --color-bg-cream:       #fff8eb;

  /* Status */
  --color-success: #2e7d32;
  --color-info:    #0277bd;
  --color-warning: #f9a825;
  --color-danger:  #c62828;

  /* Typography — rem aligns with UA default 16px; respects user scaling */
  --font-body:    "Quicksand", "Be Vietnam Pro", "Segoe UI", Roboto, system-ui, sans-serif;
  --font-heading: "Quicksand", "Be Vietnam Pro", "Segoe UI", Roboto, system-ui, sans-serif;
  --fs-body: 1rem;
  --fs-11: 0.6875rem;
  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-15: 0.9375rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-28: 1.75rem;
  --fs-32: 2rem;
  --fs-40: 2.5rem;

  /* Spacing scale (4-px) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;
  --sp-9: 48px;
  --sp-10: 64px;

  /* Layout */
  --max-width:  1280px;
  --max-narrow: 880px;
  --radius-sm: 4px;
  --radius:    8px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.05);
  --shadow:    0 4px 16px rgba(0,0,0,.08);
  --shadow-lg: 0 10px 30px rgba(0,0,0,.12);

  /* Transitions */
  --t-fast: .15s ease;
  --t:      .25s ease;
}