/* ════════════════════════════════════════════════════════════
   PAPIRO STUDIO — Design System Variables v1
   Unified CSS variables following modern design system principles
   ════════════════════════════════════════════════════════════ */

:root {
  /* ── SPACING SCALE ────────────────────────────────────── */
  --space-0:    0;
  --space-xs:   4px;
  --space-sm:   8px;
  --space-md:   12px;
  --space-lg:   16px;
  --space-xl:   20px;
  --space-2xl:  24px;
  --space-3xl:  32px;
  --space-4xl:  40px;

  /* ── TYPOGRAPHY SCALE ────────────────────────────────── */
  --fs-xs:      11px;
  --fs-sm:      12px;
  --fs-base:    13px;
  --fs-md:      14px;
  --fs-lg:      16px;
  --fs-xl:      18px;
  --fs-2xl:     20px;
  --fs-3xl:     24px;

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

  --lh-tight:   1.2;
  --lh-normal:  1.5;
  --lh-loose:   1.75;

  /* ── BORDER RADIUS ────────────────────────────────────── */
  --r-sm:       4px;
  --r-md:       6px;
  --r-lg:       8px;
  --r-xl:       12px;
  --r-full:     99999px;

  /* ── BREAKPOINTS ──────────────────────────────────────── */
  --bp-xs:      480px;
  --bp-sm:      640px;
  --bp-md:      768px;
  --bp-lg:      1024px;
  --bp-xl:      1280px;
  --bp-2xl:     1536px;

  /* ── COLORS — PRIMARY BRAND ────────────────────────────– */
  --ps-red:      #FF3B5C;
  --ps-red-light: #FF6B8A;
  --ps-red-dark:  #E60E2F;

  /* ── COLORS — SEMANTIC ────────────────────────────────── */
  --success:     #22C55E;
  --success-bg:  rgba(34, 197, 94, 0.12);
  --success-text: #166534;

  --warning:     #F59E0B;
  --warning-bg:  rgba(245, 158, 11, 0.12);
  --warning-text: #92400E;

  --danger:      #EF4444;
  --danger-bg:   rgba(239, 68, 68, 0.12);
  --danger-text: #991B1B;

  --info:        #3B82F6;
  --info-bg:     rgba(59, 130, 246, 0.12);
  --info-text:   #1E40AF;

  /* ── COLORS — SOCIAL MEDIA ────────────────────────────── */
  --facebook:     #1877F2;
  --facebook-bg:  rgba(24, 119, 242, 0.12);
  --facebook-text: #1D4ED8;

  --instagram:    #E1306C;
  --instagram-bg: rgba(225, 48, 108, 0.12);
  --instagram-text: #9D174D;

  --linkedin:     #0A66C2;
  --linkedin-bg:  rgba(10, 102, 194, 0.12);
  --linkedin-text: #1E40AF;

  --tiktok:       #000000;
  --tiktok-bg:    rgba(0, 0, 0, 0.06);
  --tiktok-text:  #1F2937;

  --youtube:      #FF0000;
  --youtube-bg:   rgba(255, 0, 0, 0.12);
  --youtube-text: #991B1B;

  --twitter:      #1DA1F2;
  --twitter-bg:   rgba(29, 161, 242, 0.12);
  --twitter-text: #0369A1;

  --pinterest:    #E60023;
  --pinterest-bg: rgba(230, 0, 35, 0.12);
  --pinterest-text: #991B1B;

  --google:       #34A853;
  --google-bg:    rgba(52, 168, 83, 0.12);
  --google-text:  #166534;

  /* ── ALIASES PARA COMPATIBILIDAD ────────────────────── */
  --fb-color:  var(--facebook);
  --ig-color:  var(--instagram);
  --li-color:  var(--linkedin);
  --tt-color:  var(--tiktok);
  --yt-color:  var(--youtube);
  --tw-color:  var(--twitter);
  --pi-color:  var(--pinterest);
  --gn-color:  var(--google);

  --c-success:  var(--success);
  --c-warning:  var(--warning);
  --c-danger:   var(--danger);
  --c-info:     var(--info);
}

/* ── DARK THEME (default in :root above) ────────────────– */

/* ── LIGHT THEME ──────────────────────────────────────────– */
body.light-theme {
  --success-text: #16A34A;
  --warning-text: #B45309;
  --danger-text:  #DC2626;
  --info-text:    #2563EB;
  --facebook-text: #1D4ED8;
  --instagram-text: #BE185D;
  --linkedin-text: #1E3A8A;
  --tiktok-text:   #404040;
  --youtube-text:  #7F1D1D;
  --twitter-text:  #0369A1;
  --pinterest-text: #7F1D1D;
  --google-text:   #166534;
}

/* ── SHADOWS ──────────────────────────────────────────────– */
:root {
  --shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.10);
  --shadow-md:  0 4px 6px rgba(0, 0, 0, 0.10);
  --shadow-lg:  0 10px 15px rgba(0, 0, 0, 0.12);
  --shadow-xl:  0 20px 25px rgba(0, 0, 0, 0.15);
}

/* ── TRANSITIONS ────────────────────────────────────────── */
:root {
  --transition-fast:  150ms ease-out;
  --transition-base:  200ms ease-out;
  --transition-slow:  300ms ease-out;
}