/**
 * Cosmetics Design System - Typography & Aesthetic Tokens
 * Harmonized, even, and attractive typography for SKKIN Cosmetics.
 * Eliminates out-of-scale giant headings and microscopic text.
 */

:root {
  /* ==========================================================================
     1. FONT FAMILIES (Exact SKKIN Typography)
     ========================================================================== */
  --font-heading: 'Montserrat', 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;

  /* ==========================================================================
     1B. SKKIN ROUND EDGE CARD FORMAT SYSTEM
     ========================================================================== */
  --radius-card: 20px;
  --radius-card-sm: 16px;
  --radius-card-lg: 24px;
  --radius-card-xl: 28px;
  --radius-pill: 9999px;
  --radius-img: 16px;
  --radius-btn: 9999px;
  --radius-input: 12px;

  --border-card: 1px solid #f1f5f9;
  --border-card-hover: 1px solid #e2e8f0;
  --shadow-card: 0 4px 18px rgba(0, 0, 0, 0.04);
  --shadow-card-hover: 0 14px 32px rgba(0, 0, 0, 0.09);

  /* ==========================================================================
     2. FONT WEIGHTS
     ========================================================================== */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* ==========================================================================
     3. LINE HEIGHTS (Balanced, Elegant Cosmetic Proportions)
     ========================================================================== */
  --line-height-ultra-tight: 1.20;  /* Hero H1 & PDP Product Title */
  --line-height-tight: 1.25;        /* Promo titles & Section H2 */
  --line-height-snug: 1.35;         /* Section H3 & Product titles */
  --line-height-compact: 1.45;      /* Buttons, pills, short notes */
  --line-height-body: 1.60;         /* Body copy & narrative paragraphs */

  /* ==========================================================================
     4. LETTER SPACINGS (Optical Kerning for Cosmetics)
     ========================================================================== */
  --letter-spacing-tighter: -0.02em; /* Hero H1 & Display headings */
  --letter-spacing-tight: -0.015em;  /* Section H2 & titles */
  --letter-spacing-snug: -0.01em;    /* Product titles, prices */
  --letter-spacing-normal: 0em;      /* Standard body copy */
  --letter-spacing-wide: 0.02em;     /* Navigation & buttons */
  --letter-spacing-badge: 0.08em;    /* Uppercase eyebrow tags & badges */

  /* ==========================================================================
     5. HARMONIZED EVEN FONT SIZES (clamp(min, preferred, max))
     Even, attractive, perfectly regular scale (11.5px to 32px)
     ========================================================================== */

  /* Badges, rating pills, tags, uppercase eyebrows (Mobile: 11px, Desktop: 12px) */
  --font-size-xs: clamp(0.72rem, 0.7rem + 0.08vw, 0.75rem);

  /* Subtitles, secondary meta, size chips, breadcrumbs (Mobile: 12.5px, Desktop: 13.5px) */
  --font-size-sm: clamp(0.8125rem, 0.8rem + 0.05vw, 0.84375rem);

  /* Standard body copy, inputs, navigation, descriptions (Mobile: 13.5px, Desktop: 14.5px) */
  --font-size-base: clamp(0.875rem, 0.85rem + 0.08vw, 0.90625rem);

  /* Product titles, prominent button text (Mobile: 14px, Desktop: 15px) */
  --font-size-md: clamp(0.90625rem, 0.88rem + 0.1vw, 0.96875rem);

  /* Card headings, product prices (Mobile: 15.5px, Desktop: 17.5px) */
  --font-size-lg: clamp(0.96875rem, 0.93rem + 0.15vw, 1.125rem);

  /* Subsection H3, feature headers (Mobile: 17px, Desktop: 19px) */
  --font-size-xl: clamp(1.0625rem, 1.02rem + 0.2vw, 1.25rem);

  /* Section H2 headings (Mobile: 20px, Desktop: 24px) */
  --font-size-2xl: clamp(1.25rem, 1.18rem + 0.35vw, 1.5rem);

  /* Prominent section banners (Mobile: 22px, Desktop: 26px) */
  --font-size-3xl: clamp(1.375rem, 1.25rem + 0.5vw, 1.65rem);

  /* Hero Display H1 & Main PDP Title (Mobile: 24px, Desktop: 30px) */
  --font-size-display: clamp(1.5rem, 1.35rem + 0.65vw, 1.95rem);
}