/* ═══════════════════════════════════════════════════════════
   FOLIUM — TOKENS
   Variables CSS para temas dark + light.
   Ver docs/REDISENO_BRIEF.md sección 14.4 para la fuente.
   ═══════════════════════════════════════════════════════════ */

[data-theme="dark"] {
  /* ── Surfaces ────────────────────────────────────────── */
  --bg:           #0d0d10;
  --bg-1:         #131316;
  --bg-2:         #181a1e;
  --bg-3:         #1f2127;
  --bg-hover:     rgba(255, 255, 255, 0.035);
  --bg-active:    rgba(255, 255, 255, 0.06);

  /* ── Borders ─────────────────────────────────────────── */
  --border:        rgba(255, 255, 255, 0.07);
  --border-md:     rgba(255, 255, 255, 0.11);
  --border-strong: rgba(255, 255, 255, 0.15);

  /* ── Text ────────────────────────────────────────────── */
  --text:    #e8e8ec;
  --text-2:  #9698a3;
  --text-3:  #62646e;
  --text-4:  #44464e;

  /* ── Accent (indigo Linear-style) ────────────────────── */
  --accent:       #5e6ad2;
  --accent-2:     #7c85e0;
  --accent-light: #a5b4fc;
  --accent-bg:    rgba(94, 106, 210, 0.13);

  /* ── Semantic (dominio jurídico) ─────────────────────── */
  --green:        #26b986;
  --green-bg:     rgba(38, 185, 134, 0.10);
  --green-border: rgba(38, 185, 134, 0.28);
  --amber:        #d97706;
  --amber-bg:     rgba(217, 119, 6, 0.10);
  --amber-border: rgba(217, 119, 6, 0.28);
  --red:          #e5484d;
  --red-bg:       rgba(229, 72, 77, 0.10);
  --red-border:   rgba(229, 72, 77, 0.28);
  --blue:         #3b82f6;
  --blue-bg:      rgba(59, 130, 246, 0.10);
  --blue-border:  rgba(59, 130, 246, 0.28);
  --purple:       #8e4ec6;
  --purple-bg:    rgba(142, 78, 198, 0.10);
  --purple-border:rgba(142, 78, 198, 0.28);

  /* ── Logo ink (hoja Folium) ──────────────────────────── */
  --logo-ink: #f0ece2;

  /* ── Shadows ─────────────────────────────────────────── */
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.55);

  /* ── Skeleton ────────────────────────────────────────── */
  --skeleton-bg:      rgba(255, 255, 255, 0.04);
  --skeleton-shimmer: rgba(255, 255, 255, 0.07);
}

[data-theme="light"] {
  --bg:        #fafafb;
  --bg-1:      #ffffff;
  --bg-2:      #f4f4f7;
  --bg-3:      #ebebef;
  --bg-hover:  rgba(0, 0, 0, 0.025);
  --bg-active: rgba(0, 0, 0, 0.045);

  --border:        rgba(0, 0, 0, 0.07);
  --border-md:     rgba(0, 0, 0, 0.12);
  --border-strong: rgba(0, 0, 0, 0.18);

  --text:   #18181b;
  --text-2: #555562;
  --text-3: #8b8b94;
  --text-4: #b3b3bc;

  --accent:       #5e6ad2;
  --accent-2:     #4d59c9;
  --accent-light: #4d59c9;
  --accent-bg:    rgba(94, 106, 210, 0.10);

  --green:        #1a9e6e;
  --green-bg:     rgba(26, 158, 110, 0.09);
  --green-border: rgba(26, 158, 110, 0.25);
  --amber:        #b86b00;
  --amber-bg:     rgba(184, 107, 0, 0.09);
  --amber-border: rgba(184, 107, 0, 0.25);
  --red:          #d93025;
  --red-bg:       rgba(217, 48, 37, 0.09);
  --red-border:   rgba(217, 48, 37, 0.25);
  --blue:         #2563eb;
  --blue-bg:      rgba(37, 99, 235, 0.09);
  --blue-border:  rgba(37, 99, 235, 0.25);
  --purple:       #7c3aed;
  --purple-bg:    rgba(124, 58, 237, 0.09);
  --purple-border:rgba(124, 58, 237, 0.25);

  --logo-ink: #1c1a12;

  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.14);

  --skeleton-bg:      rgba(0, 0, 0, 0.04);
  --skeleton-shimmer: rgba(0, 0, 0, 0.07);
}

:root {
  /* ── Geometry ────────────────────────────────────────── */
  --radius-sm: 4px;
  --radius:    6px;
  --radius-md: 10px;
  --radius-lg: 14px;

  /* ── Layout ──────────────────────────────────────────── */
  --sidebar-w: 228px;
  --topbar-h:  46px;
  --drawer-w:  480px;

  /* ── Type scale ──────────────────────────────────────── */
  --text-xs:   10.5px;
  --text-sm:   11.5px;
  --text-base: 13px;
  --text-md:   13.5px; /* body default */
  --text-lg:   16px;
  --text-xl:   22px;

  /* ── Space scale ─────────────────────────────────────── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
}