/* ===========================================================
   DESIGN TOKENS — Semantic, token-driven
   Reference: Viettel Telecom data packages storefront
   =========================================================== */

:root {
  /* ---------- Color · Text ---------- */
  --color-text-primary:    #2c2f31;
  --color-text-secondary:  #333333;
  --color-text-tertiary:   #ffffff;
  --color-text-muted:      #6b7077;
  --color-text-disabled:   #a3a8ae;
  --color-text-on-strong:  #ffffff;
  --color-text-link:       #1F7ED0;
  --color-text-link-hover: #1865B0;
  --color-brand:           #1F7ED0;

  /* ---------- Color · Surface ---------- */
  --color-surface-base:    #000000;
  --color-surface-raised:  #f4f4f4;
  --color-surface-strong:  #1F7ED0;
  --color-surface-white:   #ffffff;
  --color-surface-border:  #e5e7eb;
  --color-surface-hover:   #fafafa;
  --color-surface-overlay: rgba(0, 0, 0, 0.5);

  /* ---------- Color · State ---------- */
  --color-state-focus:     #1F7ED0;
  --color-state-focus-ring: rgba(31, 126, 208, 0.35);
  --color-state-success:   #10b981;
  --color-state-warning:   #f59e0b;
  --color-state-error:     #dc2626;

  /* ---------- Spacing (semantic) ---------- */
  --space-1: 2px;
  --space-2: 9px;
  --space-3: 10px;
  --space-4: 12px;
  --space-5: 16px;
  --space-6: 20px;
  --space-7: 25px;
  --space-8: 32px;
  --space-9: 40px;
  --space-10: 48px;
  --space-11: 64px;
  --space-12: 80px;

  /* ---------- Typography ---------- */
  --font-family-primary: "Roboto", sans-serif;
  --font-family-stack:   "Roboto", sans-serif;

  --font-size-xs:  14px;
  --font-size-sm:  15px;
  --font-size-md:  16px;
  --font-size-lg:  17px;
  --font-size-xl:  18px;
  --font-size-2xl: 22px;
  --font-size-3xl: 24px;
  --font-size-4xl: 32px;
  --font-size-5xl: 40px;
  --font-size-6xl: 56px;

  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;
  --font-weight-black:    900;

  --line-height-tight:  1.2;
  --line-height-base:   26px;
  --line-height-relaxed: 1.6;

  --letter-spacing-tight:  -0.02em;
  --letter-spacing-normal:  0;
  --letter-spacing-wide:    0.04em;

  /* ---------- Radius ---------- */
  --radius-xs: 12px;
  --radius-sm: 22px;
  --radius-md: 50px;
  --radius-pill: 999px;

  /* ---------- Motion ---------- */
  --motion-duration-instant: 200ms;
  --motion-duration-fast:    300ms;
  --motion-easing-standard:  cubic-bezier(0.2, 0, 0, 1);
  --motion-easing-emphasis:  cubic-bezier(0.2, 0, 0, 1.2);

  /* ---------- Elevation ---------- */
  --shadow-none: none;
  --shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md:   0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg:   0 12px 24px rgba(0, 0, 0, 0.1);
  --shadow-xl:   0 24px 48px rgba(0, 0, 0, 0.12);

  /* ---------- Container ---------- */
  --container-max: 1200px;
  --container-padding: 20px;
  --header-height: 64px;
  --topbar-height: 40px;
}

@media (max-width: 768px) {
  :root {
    --container-padding: 16px;
    --header-height: 56px;
  }
}