/* ============================================================
   G.G.G COSMETICS — Design Tokens
   Glow · Glitter · Glare
   ============================================================ */



/* Display: Shopee Display — geometric sans, used for headlines,
   pack copy, big numbers. Tight and confident. */







/* Body / friendly sans: DFVN Malinton — slightly more humanist,
   warmer letterforms, used for product descriptions, paragraphs,
   labels, UI body copy. */










/* Vietnamese-optimized: FVH Shopee Text — fallback for VI body */


:root {
  /* ============================================================
     COLOR — RAW PALETTE
     (mirrors the brand palette in palette_reference.png)
     ============================================================ */
  --ggg-energetic-blue: #0099FF;     /* Hero blue. Confidence, energy. */
  --ggg-cobalt-core: #0047AB;        /* Deep blue. Authority. */
  --ggg-cyber-aqua: #00FFFF;         /* High-key aqua accent. */

  --ggg-active-orange: #FF6600;      /* Primary warm. Action. */
  --ggg-pulse-orange: #FF6700;       /* Near twin, secondary warm. */
  --ggg-solar-orange: #FF5F1F;       /* Hot orange, packaging. */

  --ggg-lemon-spark: #FFD300;        /* Sun yellow. Sparkle. */
  --ggg-crayola-yellow: #FEAA1A;     /* Warm amber/yellow. */

  --ggg-pink-600: #D81B60;           /* Brand pink, deep. */
  --ggg-amaranth: #E52B50;           /* Soft red/pink. */
  --ggg-electric-pink: #FF007F;      /* Hot magenta accent. */

  --ggg-soft-milk: #FAFAFA;          /* Off-white surface. */
  --ggg-dark-grayish-red: #1F1D1D;   /* Near-black, with warm tint. */

  /* ============================================================
     COLOR — SEMANTIC ROLES
     Use these in product UIs, not the raw palette above.
     ============================================================ */

  /* Brand / primary */
  --color-brand: var(--ggg-energetic-blue);
  --color-brand-deep: var(--ggg-cobalt-core);
  --color-brand-accent: var(--ggg-active-orange);

  /* Surfaces */
  --color-bg: #FFFFFF;
  --color-bg-muted: var(--ggg-soft-milk);
  --color-bg-inverse: var(--ggg-dark-grayish-red);
  --color-surface: #FFFFFF;
  --color-surface-raised: #FFFFFF;

  /* Text */
  --color-fg: var(--ggg-dark-grayish-red);   /* primary body text */
  --color-fg-muted: #6B6868;                  /* secondary */
  --color-fg-subtle: #9D9999;                 /* tertiary / hints */
  --color-fg-inverse: #FFFFFF;                /* on dark/brand */

  /* Borders / dividers */
  --color-border: #ECECEC;
  --color-border-strong: #1F1D1D;

  /* Status / semantic */
  --color-success: #2DAB66;
  --color-success-bg: #E8F7EF;
  --color-warning: var(--ggg-crayola-yellow);
  --color-warning-bg: #FFF6E0;
  --color-danger: var(--ggg-pink-600);
  --color-danger-bg: #FDE6EE;
  --color-info: var(--ggg-energetic-blue);
  --color-info-bg: #E5F5FF;

  /* Product-line color cues */
  --color-line-glow: var(--ggg-active-orange);    /* Wonder Glow Calendula */
  --color-line-cool: var(--ggg-energetic-blue);   /* Wonder Glow Cornflower / Cooling Mask */
  --color-line-rose: var(--ggg-pink-600);         /* Wonder Glow Rose / Toner */
  --color-line-fresh: #2DAB66;                    /* Cica / Centella line */
  --color-line-revive: var(--ggg-solar-orange);   /* Chaga / Revitalize */

  /* ============================================================
     TYPE — FAMILIES
     DFVN Malinton is the display/title face — dynamic, energetic
     letterforms. Shopee Display is the body face — clean, friendly,
     highly legible at small sizes.
     ============================================================ */
  --font-display: "DFVN Malinton", "Shopee Display", -apple-system,
                  BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-body: "Shopee Display", "FVH Shopee Text", -apple-system,
               BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ============================================================
     TYPE — SIZE SCALE  (modular, 1.250 ratio at base 16)
     ============================================================ */
  --fs-12: 0.75rem;     /* micro labels / legal */
  --fs-14: 0.875rem;    /* small UI */
  --fs-16: 1rem;        /* body */
  --fs-18: 1.125rem;    /* lead body */
  --fs-20: 1.25rem;     /* large body / small heading */
  --fs-24: 1.5rem;      /* h4 */
  --fs-32: 2rem;        /* h3 */
  --fs-40: 2.5rem;      /* h2 */
  --fs-56: 3.5rem;      /* h1 / display-sm */
  --fs-80: 5rem;        /* display-md */
  --fs-120: 7.5rem;     /* display-lg, hero punch */

  /* ============================================================
     TYPE — WEIGHTS, LINE-HEIGHTS, TRACKING
     ============================================================ */
  --fw-thin: 100;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;
  --fw-black: 900;

  --lh-tight: 1.0;
  --lh-snug: 1.1;
  --lh-display: 1.05;
  --lh-heading: 1.2;
  --lh-body: 1.5;
  --lh-loose: 1.7;

  --tracking-tightest: -0.04em;
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-wider: 0.08em;
  --tracking-widest: 0.16em;     /* SECTION LABELS, BADGES */

  /* ============================================================
     SPACING — 4px base, 1.5x rhythm
     ============================================================ */
  --space-0: 0;
  --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;
  --space-32: 128px;

  /* ============================================================
     RADII — soft on UI, full pills for badges/CTAs
     ============================================================ */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-2xl: 40px;
  --radius-pill: 999px;

  /* ============================================================
     ELEVATION — restrained, mostly flat with soft cast shadows
     ============================================================ */
  --shadow-none: none;
  --shadow-xs: 0 1px 2px rgba(31, 29, 29, 0.06);
  --shadow-sm: 0 2px 6px rgba(31, 29, 29, 0.06), 0 1px 2px rgba(31, 29, 29, 0.04);
  --shadow-md: 0 8px 24px rgba(31, 29, 29, 0.08), 0 2px 6px rgba(31, 29, 29, 0.04);
  --shadow-lg: 0 18px 40px rgba(31, 29, 29, 0.12), 0 4px 12px rgba(31, 29, 29, 0.05);
  --shadow-pop: 0 24px 60px rgba(0, 71, 171, 0.18);            /* blue brand pop */
  --shadow-warm: 0 24px 60px rgba(255, 102, 0, 0.22);          /* orange warm pop */

  /* ============================================================
     MOTION
     ============================================================ */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-snap: cubic-bezier(0.34, 1.56, 0.64, 1);  /* gentle overshoot */
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;

  /* ============================================================
     LAYOUT
     ============================================================ */
  --container-sm: 640px;
  --container-md: 960px;
  --container-lg: 1200px;
  --container-xl: 1440px;
  --grid-gutter: 24px;
  --grid-columns: 12;
}

/* ============================================================
   SEMANTIC TYPE CLASSES
   Use these directly or as a reference for component styles.
   ============================================================ */

.t-display-xl {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: clamp(4rem, 9vw, var(--fs-120));
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-tightest);
  text-transform: uppercase;
}
.t-display-lg {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: clamp(3rem, 6vw, var(--fs-80));
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
}
.t-display-md {
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  font-size: var(--fs-56);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
}
.t-h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  font-size: var(--fs-40);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-tight);
}
.t-h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-32);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-tight);
}
.t-h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-24);
  line-height: var(--lh-heading);
}
.t-h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-20);
  line-height: var(--lh-heading);
}
.t-eyebrow {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-12);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
}
.t-lead {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-20);
  line-height: var(--lh-body);
}
.t-body {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-16);
  line-height: var(--lh-body);
}
.t-body-sm {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-14);
  line-height: var(--lh-body);
}
.t-caption {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: var(--fs-12);
  line-height: var(--lh-body);
  color: var(--color-fg-muted);
}
.t-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-14);
  letter-spacing: 0;
}

/* Element defaults */
html, body { font-family: var(--font-body); color: var(--color-fg); background: var(--color-bg); }
h1 { font: var(--fw-extrabold) var(--fs-40)/var(--lh-heading) var(--font-display); letter-spacing: var(--tracking-tight); }
h2 { font: var(--fw-bold) var(--fs-32)/var(--lh-heading) var(--font-display); letter-spacing: var(--tracking-tight); }
h3 { font: var(--fw-bold) var(--fs-24)/var(--lh-heading) var(--font-display); }
h4 { font: var(--fw-semibold) var(--fs-20)/var(--lh-heading) var(--font-display); }
p  { font: var(--fw-regular) var(--fs-16)/var(--lh-body) var(--font-body); }