/* ==========================================================================
   TOKENS.CSS — Design System Tokens (Premium Home Service Redesign)
   Scrapwala Hyderabad
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Poppins:wght@300;400;500;600;700;800&display=swap');

:root {
  /* ---- Brand Colors ---- */
  --cream:        #FAF7F2;
  --cream-dark:   #F2EDE4;
  --cream-border: #E8E2D9;

  --green:        #1A5C3A;
  --green-mid:    #22744A;
  --green-light:  #EEF7F2;
  --green-soft:   #D4EDE1;
  --green-accent: #3DAA6A;
  --green-hover:  #17503380;

  --gold:         #B8860B;
  --gold-light:   #FDF5E2;
  --gold-accent:  #D4A017;
  --gold-soft:    #F5E9C8;

  --charcoal:     #1C1C1A;
  --text-dark:    #2C2C2A;
  --text-mid:     #5C5C58;
  --text-light:   #8C8C88;
  --text-muted:   #ADADAA;

  --white:        #FFFFFF;
  --black:        #0A0A08;

  --star:         #F5B800;
  --wa-green:     #25D366;
  --wa-green-dark:#1DA851;

  --amber:        #C97A00;
  --amber-light:  #FDF0DC;

  /* ---- Typography ---- */
  --font-display: 'Poppins', sans-serif;
  --font-body:    'Lora', serif;
  --font-ui:      'Poppins', sans-serif; /* alias — always Poppins */

  --text-xs:    11px;
  --text-sm:    13px;
  --text-base:  15px;
  --text-md:    17px;
  --text-lg:    19px;
  --text-xl:    22px;
  --text-2xl:   28px;
  --text-3xl:   clamp(22px, 2.6vw, 34px);
  --text-4xl:   clamp(26px, 3.2vw, 42px);
  --text-5xl:   clamp(30px, 4vw, 52px);
  --text-hero:  clamp(36px, 5vw, 62px);

  --weight-light:   300;
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semi:    600;
  --weight-bold:    700;
  --weight-black:   800;

  --leading-tight:   1.1;
  --leading-snug:    1.3;
  --leading-normal:  1.6;
  --leading-relaxed: 1.85;

  /* ---- Spacing ---- */
  --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 ---- */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   18px;
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-pill: 100px;

  /* ---- Shadows ---- */
  --shadow-xs:  0 1px 4px rgba(28, 28, 26, 0.06);
  --shadow-sm:  0 2px 10px rgba(28, 28, 26, 0.07);
  --shadow-md:  0 6px 24px rgba(28, 28, 26, 0.09);
  --shadow-lg:  0 16px 48px rgba(28, 28, 26, 0.10);
  --shadow-xl:  0 28px 72px rgba(28, 28, 26, 0.12);
  --shadow-green: 0 8px 32px rgba(26, 92, 58, 0.20);
  --shadow-wa:   0 4px 20px rgba(37, 211, 102, 0.35);

  /* ---- Transitions ---- */
  --dur-fast:  0.18s;
  --dur-base:  0.30s;
  --dur-slow:  0.50s;
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);

  /* ---- Z-index ---- */
  --z-base:   1;
  --z-card:   10;
  --z-sticky: 50;
  --z-nav:    100;
  --z-float:  200;
  --z-modal:  300;

  /* ---- Layout ---- */
  --max-width: 1200px;
  --gutter:    clamp(20px, 5vw, 80px);
  --section-y: clamp(72px, 8vw, 120px);
}