/* ===========================================================
   TOKENS — Variables CSS dual-theme (claro / oscuro)
   Estilo: macOS Sonoma / Sequoia
   =========================================================== */

:root {
  /* Tipografía */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
               "Inter", "Segoe UI", system-ui, sans-serif;
  --font-mono: "SF Mono", "JetBrains Mono", ui-monospace, "Menlo", "Consolas", monospace;

  /* Radios */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 9999px;

  /* Espaciado base */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* Easings (estilo Apple) */
  --ease-out:   cubic-bezier(0.32, 0.72, 0, 1);
  --ease-in:    cubic-bezier(0.5, 0, 0.75, 0);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Transiciones */
  --t-fast: 120ms var(--ease-out);
  --t-base: 200ms var(--ease-out);
  --t-slow: 320ms var(--ease-out);

  /* Accent */
  --accent:        #0a84ff;
  --accent-hover:  #1e95ff;
  --accent-active: #0070e0;
  --accent-soft:   rgba(10, 132, 255, 0.12);
  --accent-ring:   rgba(10, 132, 255, 0.32);
  --accent-gradient: linear-gradient(180deg, #1e95ff 0%, #0a84ff 100%);

  /* Estados */
  --success:      #30d158;
  --success-soft: rgba(48, 209, 88, 0.14);
  --warning:      #ff9f0a;
  --warning-soft: rgba(255, 159, 10, 0.14);
  --danger:       #ff453a;
  --danger-soft:  rgba(255, 69, 58, 0.14);

  /* Z-indexes */
  --z-sidebar: 10;
  --z-toolbar: 5;
  --z-modal: 50;
  --z-flash: 100;
}

/* ===================== TEMA OSCURO ===================== */
:root[data-theme="dark"] {
  --bg-base:        #0a0a0c;
  --bg-page:        #0a0a0c;
  --bg-elevated:    rgba(28, 28, 32, 0.62);
  --bg-translucent: rgba(38, 38, 44, 0.5);
  --bg-sidebar:     rgba(16, 16, 20, 0.6);
  --bg-toolbar:     rgba(20, 20, 24, 0.72);
  --bg-input:       rgba(255, 255, 255, 0.045);
  --bg-input-focus: rgba(255, 255, 255, 0.08);
  --bg-hover:       rgba(255, 255, 255, 0.05);
  --bg-active:      rgba(255, 255, 255, 0.08);

  --text:           rgba(255, 255, 255, 0.94);
  --text-secondary: rgba(255, 255, 255, 0.66);
  --text-tertiary:  rgba(255, 255, 255, 0.46);
  --text-quaternary: rgba(255, 255, 255, 0.28);
  --text-on-accent: #ffffff;

  --border:        rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);
  --border-input:  rgba(255, 255, 255, 0.10);

  --shadow-sm:     0 1px 2px rgba(0, 0, 0, 0.25);
  --shadow-md:     0 4px 16px rgba(0, 0, 0, 0.30);
  --shadow-lg:     0 12px 40px rgba(0, 0, 0, 0.45);
  --shadow-xl:     0 24px 60px rgba(0, 0, 0, 0.55);
  --shadow-inset:  inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --shadow-card:   0 1px 2px rgba(0, 0, 0, 0.20),
                   0 8px 24px rgba(0, 0, 0, 0.18);
  --shadow-popover: 0 8px 32px rgba(0, 0, 0, 0.4);

  --bg-gradient:
    radial-gradient(ellipse 100% 60% at 50% -10%, rgba(10, 132, 255, 0.10), transparent 60%),
    radial-gradient(ellipse 80% 60% at 100% 100%, rgba(94, 92, 230, 0.06), transparent 60%),
    radial-gradient(ellipse 60% 50% at 0% 80%, rgba(255, 105, 180, 0.04), transparent 60%);

  color-scheme: dark;
}

/* ===================== TEMA CLARO ===================== */
:root[data-theme="light"] {
  --bg-base:        #f5f5f7;
  --bg-page:        #f5f5f7;
  --bg-elevated:    rgba(255, 255, 255, 0.78);
  --bg-translucent: rgba(255, 255, 255, 0.6);
  --bg-sidebar:     rgba(248, 248, 250, 0.78);
  --bg-toolbar:     rgba(255, 255, 255, 0.8);
  --bg-input:       rgba(0, 0, 0, 0.03);
  --bg-input-focus: rgba(255, 255, 255, 0.95);
  --bg-hover:       rgba(0, 0, 0, 0.04);
  --bg-active:      rgba(0, 0, 0, 0.06);

  --text:            rgba(0, 0, 0, 0.92);
  --text-secondary:  rgba(0, 0, 0, 0.58);
  --text-tertiary:   rgba(0, 0, 0, 0.42);
  --text-quaternary: rgba(0, 0, 0, 0.26);
  --text-on-accent:  #ffffff;

  --border:        rgba(0, 0, 0, 0.08);
  --border-strong: rgba(0, 0, 0, 0.14);
  --border-input:  rgba(0, 0, 0, 0.10);

  --shadow-sm:     0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md:     0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-lg:     0 12px 40px rgba(0, 0, 0, 0.12);
  --shadow-xl:     0 24px 60px rgba(0, 0, 0, 0.16);
  --shadow-inset:  inset 0 1px 0 rgba(255, 255, 255, 0.7);
  --shadow-card:   0 1px 2px rgba(0, 0, 0, 0.04),
                   0 8px 24px rgba(0, 0, 0, 0.06);
  --shadow-popover: 0 8px 32px rgba(0, 0, 0, 0.12);

  --bg-gradient:
    radial-gradient(ellipse 100% 60% at 50% -10%, rgba(10, 132, 255, 0.07), transparent 60%),
    radial-gradient(ellipse 80% 60% at 100% 100%, rgba(94, 92, 230, 0.05), transparent 60%),
    radial-gradient(ellipse 60% 50% at 0% 80%, rgba(255, 105, 180, 0.03), transparent 60%);

  color-scheme: light;
}