/* ============================================================
   SissyLover — Design System Variables
   Import this file FIRST in every page CSS.
   Source of truth: DESIGN.md
   ============================================================ */

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

:root {

  /* ── Primary Brand ─────────────────────────────────────── */
  --color-primary:        #E8A4C8;
  --color-primary-light:  #F5D0E8;
  --color-primary-dark:   #C97BAF;

  /* ── Secondary ─────────────────────────────────────────── */
  --color-secondary:      #B8D8E8;
  --color-secondary-light:#D9EEF7;
  --color-secondary-dark: #89BFDA;

  /* ── Accent ────────────────────────────────────────────── */
  --color-accent:         #C8B4E8;
  --color-accent-light:   #E6DCF5;
  --color-accent-dark:    #A48DC8;

  /* ── Tertiary / Warm ───────────────────────────────────── */
  --color-warm:           #F5D5B0;
  --color-warm-light:     #FBF0E2;
  --color-warm-dark:      #E8B87A;

  /* ── Mint ──────────────────────────────────────────────── */
  --color-mint:           #B4E8D4;
  --color-mint-light:     #DCF5EC;
  --color-mint-dark:      #7FD4B0;

  /* ── Neutrals ──────────────────────────────────────────── */
  --color-white:          #FFFFFF;
  --color-surface:        #FDF8FC;
  --color-surface-alt:    #F7F0F5;
  --color-border:         #EDD8E8;
  --color-border-strong:  #D4AECB;

  /* ── Text ──────────────────────────────────────────────── */
  --color-text-primary:   #3D2B3D;
  --color-text-secondary: #7A5C7A;
  --color-text-muted:     #B09AB0;
  --color-text-on-dark:   #FFFFFF;

  /* ── Status ────────────────────────────────────────────── */
  --color-success:        #7EC8A4;
  --color-success-light:  #D4F0E4;
  --color-warning:        #F5C87A;
  --color-warning-light:  #FDF0D4;
  --color-error:          #E8909A;
  --color-error-light:    #FCDDE0;
  --color-info:           #89BFDA;
  --color-info-light:     #D9EEF7;

  /* ── Admin / Backend ───────────────────────────────────── */
  --color-admin-sidebar:  #3D2B3D;
  --color-admin-nav-item: #7A5C7A;
  --color-admin-active:   #E8A4C8;

  /* ── Typography ────────────────────────────────────────── */
  --font-display:  'Playfair Display', Georgia, serif;
  --font-body:     'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:     'Fira Code', 'Courier New', monospace;

  --text-xs:    0.75rem;
  --text-sm:    0.875rem;
  --text-base:  1rem;
  --text-lg:    1.125rem;
  --text-xl:    1.25rem;
  --text-2xl:   1.5rem;
  --text-3xl:   1.875rem;
  --text-4xl:   2.25rem;

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

  --leading-tight:  1.2;
  --leading-snug:   1.35;
  --leading-normal: 1.6;
  --leading-loose:  1.8;

  /* ── Spacing ───────────────────────────────────────────── */
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-16:  4rem;

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

  /* ── Shadows ───────────────────────────────────────────── */
  --shadow-xs:   0 1px 3px rgba(61,43,61,0.06);
  --shadow-sm:   0 2px 8px rgba(61,43,61,0.08);
  --shadow-md:   0 4px 16px rgba(61,43,61,0.10);
  --shadow-lg:   0 8px 32px rgba(61,43,61,0.12);
  --shadow-xl:   0 16px 48px rgba(61,43,61,0.14);
  --shadow-pink: 0 4px 20px rgba(232,164,200,0.35);

  /* ── Transitions ───────────────────────────────────────── */
  --transition-fast:     0.15s ease;
  --transition-base:     0.25s ease;
  --transition-entrance: 0.4s ease;
  --transition-bounce:   0.4s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Z-index scale ─────────────────────────────────────── */
  --z-dropdown:  100;
  --z-sticky:    200;
  --z-overlay:   300;
  --z-modal:     400;
  --z-toast:     500;
}

/* ── Dark Theme (Backend Admin) ───────────────────────────── */
[data-theme="dark"] {
  --color-white:          #1F1625; /* Fondo de tarjetas */
  --color-surface:        #130E18; /* Fondo de la página */
  --color-surface-alt:    #2A1E32; /* Fondo alternativo / hovers */
  --color-border:         #36253B; /* Bordes */
  --color-border-strong:  #533B53;
  
  --color-text-primary:   #F5EEF6; /* Texto principal brillante */
  --color-text-secondary: #C8B6C7; /* Texto secundario más legible */
  --color-text-muted:     #B09AB0;  /* Texto muted aclarado para ser legible en dark mode */
  --color-text-on-dark:   #130E18;
  
  /* Sobrescribir colores del sidebar en modo oscuro para que sea totalmente blanco/rosa brillante */
  --color-admin-sidebar:  #1F1625; /* Mismo tono de tarjeta para un look moderno integrado */
  --color-admin-nav-item: #C8B6C7;
  
  --shadow-xs:   0 1px 3px rgba(0,0,0,0.4);
  --shadow-sm:   0 4px 12px rgba(0,0,0,0.5);
  --shadow-md:   0 8px 24px rgba(0,0,0,0.6);
  --shadow-lg:   0 12px 40px rgba(0,0,0,0.7);
  --shadow-xl:   0 20px 56px rgba(0,0,0,0.85);
  --shadow-pink: 0 4px 20px rgba(232,164,200,0.06);
}