/* ============================================================
   SMILE BABY v2 — Design Tokens (CSS Custom Properties)
   Editable from the admin panel. Change values here to
   re-skin the entire site without touching component CSS.
   ============================================================ */

:root {
  /* ── Brand Colors ───────────────────────────────────── */
  --primary:       #15A04A;
  --primary-light: #2ECB66;
  --primary-dark:  #0D6832;
  --primary-bg:    rgba(21, 160, 74, 0.08);

  --accent:        #E31837;
  --accent-light:  #FF4D6A;
  --accent-dark:   #B81230;
  --accent-bg:     rgba(227, 24, 55, 0.08);

  /* ── Neutrals ───────────────────────────────────────── */
  --white:    #FFFFFF;
  --cream:    #F4F7F6;
  --cream-2:  #EDF2F0;
  --line:     #E2E8F0;
  --line-2:   #CBD5E1;
  --ink-soft: #64748B;
  --ink:      #1E293B;
  --ink-dark: #0F172A;

  /* ── Semantic / Feedback ────────────────────────────── */
  --success:  #16A34A;
  --warning:  #F59E0B;
  --error:    #DC2626;
  --info:     #0EA5E9;

  /* ── Typography ─────────────────────────────────────── */
  --font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --fs-xs:   0.75rem;   /* 12px */
  --fs-sm:   0.875rem;  /* 14px */
  --fs-base: 1rem;      /* 16px */
  --fs-md:   1.125rem;  /* 18px */
  --fs-lg:   1.25rem;   /* 20px */
  --fs-xl:   1.5rem;    /* 24px */
  --fs-2xl:  1.875rem;  /* 30px */
  --fs-3xl:  2.25rem;   /* 36px */
  --fs-4xl:  3rem;      /* 48px */
  --fs-5xl:  3.75rem;   /* 60px */

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

  --lh-tight:  1.2;
  --lh-snug:   1.35;
  --lh-normal: 1.6;
  --lh-relaxed:1.75;

  --ls-tight:  -0.025em;
  --ls-normal:  0;
  --ls-wide:    0.025em;
  --ls-wider:   0.05em;

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

  /* ── Border Radius ──────────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* ── Shadows ────────────────────────────────────────── */
  --shadow-xs:   0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm:   0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md:   0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  --shadow-lg:   0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
  --shadow-xl:   0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
  --shadow-2xl:  0 25px 50px -12px rgba(0, 0, 0, 0.2);
  --shadow-inner:inset 0 2px 4px rgba(0, 0, 0, 0.06);
  --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.06);
  --shadow-card-hover: 0 12px 28px rgba(0, 0, 0, 0.12);
  --shadow-primary: 0 8px 20px rgba(21, 160, 74, 0.25);

  /* ── Transitions ────────────────────────────────────── */
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in:      cubic-bezier(0.4, 0, 1, 1);
  --ease-out:     cubic-bezier(0, 0, 0.2, 1);
  --ease-bounce:  cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-fast:   150ms;
  --duration-base:   300ms;
  --duration-slow:   500ms;
  --duration-slower: 700ms;

  --transition-fast:   all 150ms var(--ease-default);
  --transition-base:   all 300ms var(--ease-default);
  --transition-slow:   all 500ms var(--ease-default);

  /* ── Z-Index Scale ──────────────────────────────────── */
  --z-dropdown:  100;
  --z-sticky:    200;
  --z-header:    300;
  --z-overlay:   400;
  --z-modal:     500;
  --z-toast:     600;
  --z-tooltip:   700;

  /* ── Layout ─────────────────────────────────────────── */
  --max-width:    1200px;
  --max-width-sm: 720px;
  --max-width-lg: 1400px;
  --header-h:     80px;
  --header-h-scrolled: 80px;

  /* ── Glassmorphism ──────────────────────────────────── */
  --glass-bg:     rgba(255, 255, 255, 0.72);
  --glass-border: rgba(255, 255, 255, 0.3);
  --glass-blur:   16px;
}