/* ============================================================
   VARIABLES.CSS - Sakshi's Secret Garden Design Tokens
   All CSS custom properties for the entire design system.
   ============================================================ */

:root {
  /* ---- Colors: Light Mode ---- */
  --bg:                 #FFF8FA;
  --bg-surface:         #FFF0F5;
  --bg-elevated:        #FFFFFF;
  --text-primary:       #4A3540;
  --text-secondary:     #8B6B7B;
  --text-muted:         #B8A0AA;
  --accent:             #E8879B;
  --accent-hover:       #D6708A;
  --accent-light:       #FDDDE6;
  --accent-translucent: rgba(232, 135, 155, 0.12);
  --border:             rgba(232, 135, 155, 0.2);
  --shadow:             rgba(232, 135, 155, 0.15);
  --danger:             #E85A6F;
  --danger-light:       rgba(232, 90, 111, 0.1);
  --success:            #6BBF8A;
  --success-light:      rgba(107, 191, 138, 0.1);
  --warning:            #F0B060;
  --warning-light:      rgba(240, 176, 96, 0.1);

  /* ---- Spacing Scale ---- */
  --space-xs:   4px;
  --space-sm:   8px;
  --space-md:   16px;
  --space-lg:   24px;
  --space-xl:   32px;
  --space-2xl:  48px;
  --space-3xl:  64px;

  /* ---- Typography ---- */
  --font-ui:          'Quicksand', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-handwriting: 'Caveat', 'Segoe Script', cursive;
  --font-mono:        'SF Mono', 'Fira Code', 'Cascadia Code', monospace;

  --text-xs:    0.6875rem;   /* 11px */
  --text-sm:    0.8125rem;   /* 13px */
  --text-base:  0.9375rem;   /* 15px */
  --text-md:    1rem;        /* 16px */
  --text-lg:    1.125rem;    /* 18px */
  --text-xl:    1.3125rem;   /* 21px */
  --text-2xl:   1.625rem;    /* 26px */
  --text-3xl:   2.125rem;    /* 34px */

  --leading-tight:  1.25;
  --leading-normal: 1.55;
  --leading-loose:  1.8;

  --weight-normal:   400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ---- Border Radius ---- */
  --radius-sm:     8px;
  --radius-md:     12px;
  --radius-lg:     16px;
  --radius-pill:   24px;
  --radius-circle: 50%;

  /* ---- Shadows ---- */
  --shadow-sm:   0 1px 3px rgba(232, 135, 155, 0.08),
                 0 1px 2px rgba(232, 135, 155, 0.06);
  --shadow-md:   0 4px 12px rgba(232, 135, 155, 0.12),
                 0 2px 4px rgba(232, 135, 155, 0.06);
  --shadow-lg:   0 12px 32px rgba(232, 135, 155, 0.18),
                 0 4px 8px rgba(232, 135, 155, 0.08);
  --shadow-glow: 0 0 20px rgba(232, 135, 155, 0.3),
                 0 0 40px rgba(232, 135, 155, 0.1);

  /* ---- Z-index Scale ---- */
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-modal:    500;
  --z-toast:    600;
  --z-overlay:  400;
  --z-max:      999;

  /* ---- Transitions ---- */
  --transition-fast:   0.15s ease;
  --transition-normal: 0.3s ease;
  --transition-slow:   0.5s ease;

  /* ---- Layout Sizes ---- */
  --nav-height:        60px;
  --sidebar-width:     280px;
  --max-content-width: 800px;
  --header-height:     56px;
  --fab-size:          56px;
  --fab-offset:        24px;
}

/* ============================================================
   Dark Mode
   ============================================================ */
[data-theme="dark"] {
  --bg:                 #1A1216;
  --bg-surface:         #2A1E24;
  --bg-elevated:        #352830;
  --text-primary:       #F0E0E6;
  --text-secondary:     #B8A0AA;
  --text-muted:         #8B6B7B;
  --accent:             #F0A0B4;
  --accent-hover:       #F4B8C8;
  --accent-light:       rgba(240, 160, 180, 0.15);
  --accent-translucent: rgba(240, 160, 180, 0.08);
  --border:             rgba(240, 160, 180, 0.15);
  --shadow:             rgba(0, 0, 0, 0.4);
  --danger:             #F07080;
  --danger-light:       rgba(240, 112, 128, 0.12);
  --success:            #80D0A0;
  --success-light:      rgba(128, 208, 160, 0.12);
  --warning:            #F0C080;
  --warning-light:      rgba(240, 192, 128, 0.12);

  --shadow-sm:   0 1px 3px rgba(0, 0, 0, 0.25),
                 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-md:   0 4px 12px rgba(0, 0, 0, 0.35),
                 0 2px 4px rgba(0, 0, 0, 0.2);
  --shadow-lg:   0 12px 32px rgba(0, 0, 0, 0.45),
                 0 4px 8px rgba(0, 0, 0, 0.25);
  --shadow-glow: 0 0 20px rgba(240, 160, 180, 0.2),
                 0 0 40px rgba(240, 160, 180, 0.08);
}