/* ============================================================
   PERFECT CHOICE — Design Tokens
   Brand: Black + Yellow/Gold + White
   Source of truth: logo-removebg.png
   ============================================================ */

:root {
  /* ── Brand Colors ────────────────────────────────────── */
  --color-black:        #0A0A0A;
  --color-black-light:  #1A1A1A;
  --color-black-soft:   #222222;

  --color-yellow:       #F5B800;
  --color-yellow-hover: #E5AB00;
  --color-yellow-light: #FFF4CC;
  --color-yellow-glow:  rgba(245, 184, 0, 0.15);
  --color-yellow-10:    rgba(245, 184, 0, 0.10);

  --color-white:        #FFFFFF;
  --color-offwhite:     #FAFAFA;
  --color-light-grey:   #F5F5F5;
  --color-border:       #E5E7EB;
  --color-border-dark:  #333333;

  --color-grey-400:     #9CA3AF;
  --color-grey-500:     #6B7280;
  --color-grey-600:     #4B5563;
  --color-grey-700:     #374151;
  --color-grey-800:     #1F2937;

  --color-text-primary:   var(--color-black);
  --color-text-secondary: var(--color-grey-600);
  --color-text-muted:     var(--color-grey-500);
  --color-text-on-dark:   var(--color-white);
  --color-text-on-yellow: var(--color-black);

  /* Status */
  --color-success:  #16A34A;
  --color-error:    #DC2626;

  /* ── Typography ──────────────────────────────────────── */
  --font-primary: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Fluid type scale */
  --text-xs:    clamp(0.75rem,  0.7rem  + 0.15vw, 0.8125rem);   /* 12–13px */
  --text-sm:    clamp(0.8125rem, 0.78rem + 0.2vw,  0.875rem);    /* 13–14px */
  --text-base:  clamp(0.875rem, 0.84rem + 0.25vw, 1rem);         /* 14–16px */
  --text-md:    clamp(1rem,     0.95rem + 0.3vw,  1.125rem);     /* 16–18px */
  --text-lg:    clamp(1.125rem, 1.05rem + 0.4vw,  1.25rem);      /* 18–20px */
  --text-xl:    clamp(1.25rem,  1.1rem  + 0.6vw,  1.5rem);       /* 20–24px */
  --text-2xl:   clamp(1.5rem,   1.3rem  + 0.8vw,  1.875rem);     /* 24–30px */
  --text-3xl:   clamp(1.875rem, 1.5rem  + 1.2vw,  2.25rem);      /* 30–36px */
  --text-4xl:   clamp(2.25rem,  1.8rem  + 1.5vw,  3rem);         /* 36–48px */
  --text-5xl:   clamp(2.75rem,  2rem    + 2vw,    3.75rem);       /* 44–60px */
  --text-6xl:   clamp(3rem,     2.2rem  + 2.5vw,  4.5rem);        /* 48–72px */

  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;
  --font-weight-extrabold:800;

  --line-height-tight:    1.15;
  --line-height-snug:     1.3;
  --line-height-normal:   1.6;
  --line-height-relaxed:  1.75;

  --letter-spacing-tight:  -0.025em;
  --letter-spacing-normal:  0;
  --letter-spacing-wide:    0.025em;
  --letter-spacing-wider:   0.05em;
  --letter-spacing-caps:    0.1em;

  /* ── Spacing (4px base unit) ─────────────────────────── */
  --space-1:   0.25rem;   /* 4px */
  --space-2:   0.5rem;    /* 8px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */
  --space-32:  8rem;      /* 128px */

  /* Section padding */
  --section-padding-y: clamp(3rem, 5vw, 6rem);
  --section-padding-x: clamp(1rem, 3vw, 2rem);

  /* ── Border Radius ───────────────────────────────────── */
  --radius-sm:    6px;
  --radius-md:    10px;
  --radius-lg:    14px;
  --radius-xl:    20px;
  --radius-2xl:   28px;
  --radius-full:  9999px;

  /* ── Shadows ─────────────────────────────────────────── */
  --shadow-xs:    0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm:    0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-md:    0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-lg:    0 8px 32px rgba(0, 0, 0, 0.10);
  --shadow-xl:    0 16px 48px rgba(0, 0, 0, 0.12);
  --shadow-card:  0 2px 12px rgba(0, 0, 0, 0.06), 0 1px 4px rgba(0, 0, 0, 0.04);
  --shadow-card-hover: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-yellow: 0 4px 20px rgba(245, 184, 0, 0.25);

  /* ── Transitions ─────────────────────────────────────── */
  --transition-fast:    150ms ease;
  --transition-base:    250ms ease;
  --transition-smooth:  350ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-spring:  500ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Container ───────────────────────────────────────── */
  --container-max:     1280px;
  --container-wide:    1440px;
  --container-narrow:  800px;
  --container-padding: clamp(1rem, 4vw, 2rem);

  /* ── Z-index ─────────────────────────────────────────── */
  --z-dropdown:   100;
  --z-sticky:     200;
  --z-header:     300;
  --z-overlay:    400;
  --z-modal:      500;
  --z-mobile-bar: 600;
  --z-toast:      700;

  /* ── Breakpoints (for reference, used in media queries) ─ */
  /* --bp-xs:  480px   */
  /* --bp-sm:  640px   */
  /* --bp-md:  768px   */
  /* --bp-lg:  1024px  */
  /* --bp-xl:  1280px  */
  /* --bp-2xl: 1440px  */
}