/* ═══════════════════════════════════════════════════════════════
   DESIGN TOKENS — StoryForge Desktop
   Fuente de verdad: pwa/ui-audit/03-tokens (🟢 OBSERVED)
   Misma identidad que la PWA, composición desktop.
   ═══════════════════════════════════════════════════════════════ */

:root, :root[data-theme="dark"] {
  /* Fondos y superficies */
  --bg:             #111114;
  --surface:        rgba(255,255,255,.05);
  --surface2:       rgba(255,255,255,.08);
  --surface-solid:  #1c1c1e;
  --surface-nav:    rgba(17,17,20,.92);
  --topbar-bg:      linear-gradient(180deg, rgba(30,34,50,.97), rgba(18,20,34,.95));

  /* Bordes */
  --border:         rgba(255,255,255,.08);
  --hint:           rgba(255,255,255,.3);

  /* Textos */
  --text:           #ffffff;
  --muted:          rgba(255,255,255,.38);
  --muted2:         rgba(255,255,255,.55);

  /* Brand / acento */
  --accent:         #0a84ff;
  --accent2:        #30d158;
  --forge:          #5ab4cd;

  /* Semánticos */
  --green:          #30d158;
  --blue:           #0a84ff;
  --yellow:         #ff9f0a;
  --red:            #ff453a;
  --teal:           #64d2ff;
  --gold:           #ff9f0a;
  --orange:         #ff9f0a;

  /* Semánticos extendidos */
  --red-danger:     #ef4444;
  --green-success:  #22c55e;
  --amber:          #f59e0b;
  --pink:           #f72585;
  --purple:         #a855f7;
  --teal-dark:      #0d9488;

  /* Radio base */
  --r:              16px;

  /* Escala de radios (ui-audit/radius) */
  --r-sm:           8px;
  --r-md:           12px;
  --r-lg:           16px;
  --r-xl:           20px;
  --r-2xl:          24px;

  /* Sombras (ui-audit/shadows) */
  --shadow-topbar:  0 1px 0 rgba(255,255,255,.06), 0 4px 24px rgba(0,0,0,.35);
  --shadow-card:    0 8px 24px rgba(0,0,0,.30);
  --shadow-accent:  0 4px 12px rgba(10,132,255,.35);
  --shadow-accent-hover: 0 6px 18px rgba(10,132,255,.5);
  --shadow-modal:   0 24px 64px rgba(0,0,0,.5);

  /* Gradientes */
  --grad-primary:   linear-gradient(135deg, var(--accent), var(--accent2));
  --grad-logo:      linear-gradient(135deg, #fff, var(--accent));
  --grad-forge:     linear-gradient(180deg, #ffffffa1 0%, #5ab4cd 100%);

  /* Layout desktop */
  --topbar-h:       56px;
  --sidebar-w:      248px;
  --sidebar-w-min:  64px;
  --content-max:    1560px;

  /* Tipografía */
  --font:           -apple-system, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', 'Segoe UI', sans-serif;
}

:root[data-theme="light"] {
  --bg:             #f2f2f7;
  --surface:        #ffffff;
  --surface2:       #f2f2f7;
  --surface-solid:  #ffffff;
  --surface-nav:    rgba(242,242,247,.92);
  --topbar-bg:      linear-gradient(180deg, rgba(255,255,255,.97), rgba(242,245,255,.94));

  --border:         rgba(0,0,0,.06);
  --hint:           #aeaeb2;

  --text:           #3d3d3d;
  --muted:          #8e8e93;
  --muted2:         #636366;

  --red:            #ff3b30;
  --teal:           #0a84ff;

  --shadow-topbar:  0 1px 0 rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.07);
  --shadow-card:    0 8px 24px rgba(0,0,0,.08);
  --shadow-modal:   0 24px 64px rgba(0,0,0,.18);
}