/* ============================================================
   G.G.G COSMETICS & CUTEM PARTNERSHIP — DESIGN SYSTEM TOKENS
   Glow · Glitter · Glare x Clinical Medical Derma
   ============================================================ */

/* ---------- FONT FACES ---------- */

/* Display: Shopee Display */
@font-face {
  font-family: "Shopee Display";
  src: url("../fonts/ShopeeDisplay-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Shopee Display";
  src: url("../fonts/ShopeeDisplay-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Shopee Display";
  src: url("../fonts/ShopeeDisplay-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Shopee Display";
  src: url("../fonts/ShopeeDisplay-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Shopee Display";
  src: url("../fonts/ShopeeDisplay-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Shopee Display";
  src: url("../fonts/ShopeeDisplay-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* Display / Humanist: DFVN Malinton */
@font-face {
  font-family: "DFVN Malinton";
  src: url("../fonts/DFVN-Malinton-Regular.otf") format("opentype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "DFVN Malinton";
  src: url("../fonts/DFVN-Malinton-Medium.otf") format("opentype");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "DFVN Malinton";
  src: url("../fonts/DFVN-Malinton-SemiBold.otf") format("opentype");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "DFVN Malinton";
  src: url("../fonts/DFVN-Malinton-Bold.otf") format("opentype");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "DFVN Malinton";
  src: url("../fonts/DFVN-Malinton-ExtraBold.otf") format("opentype");
  font-weight: 800;
  font-display: swap;
}

:root {
  /* ============================================================
     COLOR — CORE BRAND PALETTE
     ============================================================ */
  --ggg-energetic-blue: #0099FF;     /* Hero blue. Confidence & energy */
  --ggg-cobalt-core: #0047AB;        /* Deep blue. Medical authority */
  --ggg-cyber-aqua: #00FFFF;         /* Lens glow highlight & accents */
  --ggg-cyan-glow: #38bdf8;          /* Soft electric cyan */
  --ggg-active-orange: #FF6600;      /* Primary CTA / Event Accent */
  --ggg-pulse-orange: #FF5F1F;       /* Warm secondary */
  --ggg-lemon-spark: #FFD300;        /* Sparkle star / gold badge */
  --ggg-soft-milk: #FAFAFA;          /* Light surface */
  --ggg-dark-grayish-red: #1F1D1D;   /* Dark neutral */
  --ggg-deep-navy: #060b1c;          /* Deep KV Background */
  --ggg-navy-card: rgba(10, 24, 58, 0.72); /* Glassmorphic card surface */
  --ggg-navy-card-border: rgba(56, 189, 248, 0.22); /* Radiant border */

  /* Product-line cues */
  --color-line-glow: var(--ggg-active-orange);
  --color-line-cool: var(--ggg-energetic-blue);
  --color-line-rose: #D81B60;
  --color-line-chaga: #FF5F1F;
  --color-line-cutem: #0047AB;
  --color-line-cica: #2DAB66;

  /* ============================================================
     TYPE SYSTEM
     ============================================================ */
  --font-display: "DFVN Malinton", "Shopee Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-body: "Shopee Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Scale */
  --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;
  --fs-48: 3rem;
  --fs-56: 3.5rem;
  --fs-72: 4.5rem;

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;
  --fw-black: 900;

  --tracking-tight: -0.025em;
  --tracking-normal: 0em;
  --tracking-wide: 0.05em;
  --tracking-widest: 0.16em;

  /* ============================================================
     SPACING & RADII
     ============================================================ */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-2xl: 40px;
  --radius-pill: 9999px;

  /* ============================================================
     SHADOWS & GLOWS
     ============================================================ */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.5);
  --glow-blue: 0 0 40px rgba(0, 153, 255, 0.35);
  --glow-cyan: 0 0 35px rgba(0, 255, 255, 0.45);
  --glow-orange: 0 0 35px rgba(255, 102, 0, 0.45);

  /* Containers */
  --container-max: 1240px;
  --container-sm: 760px;
  --transition-fast: 150ms ease;
  --transition-base: 250ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow: 400ms cubic-bezier(0.16, 1, 0.3, 1);
}