/* ============================================
   SENEM ŞEVKE BEAUTY — Design Token System
   ============================================ */

:root {
  /* === Primary Color Palette (Light Mode) === */
  --color-pudra-pink:         #E8B4B8;
  --color-pudra-pink-light:   #F2D0D3;
  --color-pudra-pink-dark:    #D49BA0;
  --color-pudra-pink-rgb:     232, 180, 184;

  --color-champagne-gold:       #D4AF37;
  --color-champagne-gold-light: #E8D48B;
  --color-champagne-gold-dark:  #B8960C;
  --color-champagne-gold-rgb:   212, 175, 55;

  --color-pastel-lilac:       #D8C8E8;
  --color-pastel-lilac-light: #EBE3F3;
  --color-soft-mint:          #C8E8D8;
  --color-soft-mint-light:    #E0F5EB;

  /* === Background Colors === */
  --color-bg-primary:     #F6F5F3;
  --color-bg-secondary:   #EFEDEA;
  --color-bg-white:       #FFFFFF;
  --color-bg-warm:        #F0EDE8;
  --color-bg-section-alt: #FAF9F7;

  /* === Text Colors === */
  --color-text-primary:   #1A1A1A;
  --color-text-secondary: #5A5A5A;
  --color-text-muted:     #8A8A8A;
  --color-text-light:     #FFFFFF;
  --color-text-gold:      #B8960C;

  /* === Surface Colors === */
  --color-surface-card:   #FFFFFF;
  --color-surface-hover:  #F6F5F3;
  --color-border-light:   #E8E6E1;
  --color-border-gold:    rgba(212, 175, 55, 0.3);

  /* === Overlay === */
  --color-overlay:        rgba(45, 45, 45, 0.5);
  --color-overlay-dark:   rgba(26, 26, 46, 0.7);

  /* === Typography === */
  --font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:    'Poppins', 'Segoe UI', Roboto, sans-serif;

  --fs-display:   clamp(2.5rem, 5vw, 4rem);
  --fs-h1:        clamp(2rem, 4vw, 3rem);
  --fs-h2:        clamp(1.5rem, 3vw, 2.25rem);
  --fs-h3:        clamp(1.25rem, 2.5vw, 1.75rem);
  --fs-h4:        clamp(1.1rem, 2vw, 1.35rem);
  --fs-body:      clamp(0.95rem, 1.5vw, 1.05rem);
  --fs-body-lg:   clamp(1.05rem, 1.8vw, 1.2rem);
  --fs-small:     clamp(0.8rem, 1.2vw, 0.9rem);
  --fs-tiny:      clamp(0.7rem, 1vw, 0.8rem);

  --fw-light:     300;
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;

  --lh-heading:   1.3;
  --lh-body:      1.7;
  --lh-tight:     1.2;

  --ls-heading:   0.02em;
  --ls-wide:      0.08em;
  --ls-caps:      0.15em;

  /* === Spacing System (8px base) === */
  --space-2xs:    0.125rem;  /* 2px  */
  --space-xs:     0.25rem;   /* 4px  */
  --space-sm:     0.5rem;    /* 8px  */
  --space-md:     1rem;      /* 16px */
  --space-lg:     1.5rem;    /* 24px */
  --space-xl:     2rem;      /* 32px */
  --space-2xl:    3rem;      /* 48px */
  --space-3xl:    4rem;      /* 64px */
  --space-4xl:    6rem;      /* 96px */
  --space-5xl:    8rem;      /* 128px */
  --space-section: clamp(4rem, 8vw, 7rem);

  /* === Border Radius === */
  --radius-sm:     2px;
  --radius-md:     4px;
  --radius-lg:     6px;
  --radius-xl:     8px;
  --radius-pill:   999px;
  --radius-circle: 50%;

  /* === Shadows === */
  --shadow-xs:    0 1px 2px rgba(0, 0, 0, 0.02);
  --shadow-sm:    0 1px 4px rgba(0, 0, 0, 0.03);
  --shadow-md:    0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-lg:    0 4px 16px rgba(0, 0, 0, 0.06);
  --shadow-xl:    0 8px 24px rgba(0, 0, 0, 0.08);
  --shadow-gold:  0 2px 12px rgba(212, 175, 55, 0.1);
  --shadow-pink:  0 2px 12px rgba(232, 180, 184, 0.12);
  --shadow-card-hover: 0 8px 24px rgba(0, 0, 0, 0.08);

  /* === Transitions === */
  --transition-fast:   0.2s ease;
  --transition-base:   0.3s ease;
  --transition-slow:   0.5s ease;
  --transition-theme:  0.3s ease;

  /* === Layout === */
  --container-max:     1200px;
  --container-narrow:  800px;
  --container-wide:    1400px;
  --header-height:     80px;
  --header-height-scrolled: 65px;

  /* === Z-Index Scale === */
  --z-dropdown:    100;
  --z-sticky:      200;
  --z-fixed:       300;
  --z-modal-bg:    400;
  --z-modal:       500;
  --z-popover:     600;
  --z-tooltip:     700;
  --z-whatsapp:    800;
  --z-chatbot:     850;
  --z-header:      900;
  --z-max:         999;
}

/* ============================================
   DARK MODE — Otomatik Gece Modu
   ============================================ */
[data-theme="dark"] {
  --color-bg-primary:     #1A1A2E;
  --color-bg-secondary:   #16213E;
  --color-bg-white:       #1E1E3A;
  --color-bg-warm:        #1C1C34;
  --color-bg-section-alt: #191930;

  --color-text-primary:   #EAEAEA;
  --color-text-secondary: #B8B8CC;
  --color-text-muted:     #8888A0;
  --color-text-light:     #FFFFFF;

  --color-surface-card:   #1E1E3A;
  --color-surface-hover:  #252545;
  --color-border-light:   #2A2A4A;
  --color-border-gold:    rgba(212, 175, 55, 0.25);

  --color-overlay:        rgba(10, 10, 20, 0.6);
  --color-overlay-dark:   rgba(10, 10, 20, 0.8);

  --shadow-xs:    0 1px 3px rgba(0, 0, 0, 0.15);
  --shadow-sm:    0 2px 8px rgba(0, 0, 0, 0.2);
  --shadow-md:    0 4px 16px rgba(0, 0, 0, 0.25);
  --shadow-lg:    0 8px 32px rgba(0, 0, 0, 0.3);
  --shadow-xl:    0 16px 48px rgba(0, 0, 0, 0.35);
  --shadow-gold:  0 4px 20px rgba(212, 175, 55, 0.1);
  --shadow-pink:  0 4px 20px rgba(232, 180, 184, 0.1);
  --shadow-card-hover: 0 12px 40px rgba(212, 175, 55, 0.08);
}