/* Source: gemini/DESIGN-SYSTEM-pa1.md. */
:root {
  /* --- Primitive Base Colors --- */
  --sv-color-paper-50:    #fdfbf7;
  --sv-color-paper-100:   #f6f1e7; /* Nền chính */
  --sv-color-paper-200:   #ebe4d5;
  --sv-color-paper-300:   #e1d9c8; /* Đường kẻ phân cách */

  --sv-color-ink-900:     #0b1f1b; /* Màu hover nút */
  --sv-color-ink-800:     #14302a; /* Chữ chính & Nút Primary */
  --sv-color-ink-700:     #24453e;
  --sv-color-ink-500:     #566660; /* Muted text / Nhãn phụ */
  --sv-color-ink-300:     #94a19c;

  --sv-color-tangerine:   #ff6b3d; /* Nút CTA Mua Outbound */
  --sv-color-tangerine-dark: #e4532a; /* CTA Hover */
  --sv-color-tangerine-glow: rgba(255, 107, 61, 0.28);

  /* --- Bento & Collection Pastel Tokens --- */
  --sv-color-butter:      #ffd66b; /* Vàng bơ (Danh mục & Marquee) */
  --sv-color-butter-light:#fff2cc;
  --sv-color-lilac:       #c9b8ff; /* Tím Tử đinh hương (Parrot / Trải nghiệm) */
  --sv-color-peach:       #ffc4a8; /* Hồng đào (Cat lovers / Quà tặng) */
  --sv-color-sage:        #bfd8c2; /* Xanh sage (Fishing / Thiên nhiên) */
  --sv-color-sun-warm:    #ffe3a3; /* Vàng ấm (Family & Veterans) */

  /* --- Surface & Elevation --- */
  --sv-surface-card:      #fffdf8;
  --sv-surface-elevated:  #ffffff;
  --sv-surface-overlay:   rgba(20, 48, 42, 0.45);
}

:root {
  --font-serif: 'Fraunces', Georgia, serif;
  --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Font Variations */
  --serif-editorial: "SOFT" 100, "WONK" 1;

  /* Type Scale */
  --text-xs:    0.75rem;    /* 12px - Eyebrow, badge, date */
  --text-sm:    0.875rem;   /* 14px - Card subtitle, nav pill, small button */
  --text-base:  1.03125rem; /* 16.5px - Thân bài, accordion */
  --text-lg:    1.1875rem;  /* 19px - Lead paragraph, sub-heading */
  --text-xl:    clamp(1.25rem, 1.8vw, 1.5rem);       /* 20px - 24px - H4, card heading */
  --text-2xl:   clamp(1.5rem, 2.3vw, 1.875rem);      /* 24px - 30px - H3, collection tile */
  --text-3xl:   clamp(1.875rem, 3.2vw, 2.5rem);      /* 30px - 40px - H2 section */
  --text-4xl:   clamp(2.5rem, 4.5vw, 3.75rem);       /* 40px - 60px - Product title, catalog hero */
  --text-hero:  clamp(2.875rem, 7vw, 6.25rem);       /* 46px - 100px - H1 Hero Display */

  /* Line Heights */
  --leading-tight:  0.96;
  --leading-snug:   1.2;
  --leading-normal: 1.6;
}

:root {
  --space-1:   0.25rem;  /* 4px  - Khoảng cách icon & chữ */
  --space-2:   0.5rem;   /* 8px  - Đệm trong chip, gap nhỏ */
  --space-3:   0.75rem;  /* 12px - Gap nút bấm, đệm badge */
  --space-4:   1rem;     /* 16px - Padding card nhỏ, lề text */
  --space-5:   1.25rem;  /* 20px - Gap lưới card mobile */
  --space-6:   1.5rem;   /* 24px - Lề trong panel, gap lưới desktop */
  --space-8:   2rem;     /* 32px - Khoảng cách khối nội dung */
  --space-10:  2.5rem;   /* 40px - Padding section mobile */
  --space-12:  3rem;     /* 48px - Khoảng cách giữa các section lớn */
  --space-16:  4rem;     /* 64px - Padding section desktop */
  --space-20:  5rem;     /* 80px - Hero bottom spacing */
  --space-24:  6rem;     /* 96px - Footer top spacing */
}

:root {
  --radius-xs:    4px;
  --radius-sm:    12px;  /* Nút nhỏ, ô input, dropdown */
  --radius-md:    20px;  /* Card sản phẩm, panel mua hàng */
  --radius-lg:    28px;  /* Bento tiles, khối hero */
  --radius-pill:  999px; /* Nút CTA, Chip lọc, Nav pill */
}

:root {
  --shadow-subtle:  0 2px 8px rgba(20, 48, 42, 0.04);
  --shadow-card:    0 8px 24px rgba(20, 48, 42, 0.08);
  --shadow-hover:   0 20px 40px rgba(20, 48, 42, 0.14);
  --shadow-cta:     0 8px 20px rgba(255, 107, 61, 0.32);
}

:root {
 --color-canvas:var(--sv-color-paper-100);
 --color-text-main:var(--sv-color-ink-800);
 --color-text-muted:var(--sv-color-ink-500);
 --color-border-subtle:var(--sv-color-paper-300);
 --color-cta-primary:var(--sv-color-tangerine);
 --color-badge-sticker:var(--sv-color-butter);
 --sv-ease:cubic-bezier(0.2,0.8,0.2,1);
}