/* ============================================================================
 * FractTokens — Single source of truth de la identidad visual FractAIll
 * ============================================================================
 * Cualquier superficie del ecosistema carga ESTE archivo y NUNCA redefine
 * estos tokens. Cambiar acá = cambiar TODAS las superficies a la vez.
 *
 * Cargar como:
 *   <link rel="stylesheet" href="https://fractaill.com/css/fract-tokens.css">
 *
 * Versión: 1.0.0 · 2026-04-28
 * ============================================================================ */

:root {
  /* ─── Marca ────────────────────────────────────────────────────────── */
  --fract-accent:        #FF7A29;
  --fract-accent-2:      #FF9550;
  --fract-accent-deep:   #C9551A;
  --fract-accent-soft:   rgba(255,122,41,0.10);
  --fract-accent-border: rgba(255,122,41,0.32);
  --fract-accent-glow:   rgba(255,122,41,0.45);

  /* ─── Fondos / superficies ────────────────────────────────────────── */
  --fract-bg:            #FAFAF7;
  --fract-bg-elev:       #FFFFFF;
  --fract-surface:       #F4F4F0;
  --fract-surface-2:     #EDEDE6;

  /* ─── Bordes ──────────────────────────────────────────────────────── */
  --fract-border:        rgba(10,10,13,0.08);
  --fract-border-strong: rgba(10,10,13,0.14);

  /* ─── Texto ────────────────────────────────────────────────────────── */
  --fract-text:          #0A0A0D;
  --fract-text-soft:     #3D4047;
  --fract-text-dim:      #6B6E76;
  --fract-text-faint:    #9CA0A8;

  /* ─── Estados / feedback ──────────────────────────────────────────── */
  --fract-green:         #00A958;
  --fract-red:           #D9342B;
  --fract-yellow:        #D88E00;
  --fract-blue:          #2563EB;
  --fract-gold:          #C99300;

  /* ─── Tipografías ──────────────────────────────────────────────────── */
  --fract-font-sans:  -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", system-ui, sans-serif;
  --fract-font-serif: Georgia, Charter, "Iowan Old Style", serif;

  /* ─── Radios ───────────────────────────────────────────────────────── */
  --fract-radius-xs:  6px;
  --fract-radius:     12px;
  --fract-radius-lg:  18px;
  --fract-radius-xl:  22px;
  --fract-radius-pill: 999px;

  /* ─── Sombras ──────────────────────────────────────────────────────── */
  --fract-shadow-sm:    0 1px 3px rgba(10,10,13,0.06), 0 4px 12px -2px rgba(10,10,13,0.04);
  --fract-shadow-md:    0 6px 18px -4px rgba(10,10,13,0.10);
  --fract-shadow-lg:    0 24px 48px -16px rgba(10,10,13,0.18);
  --fract-shadow-orange: 0 12px 28px -10px rgba(255,122,41,0.55);

  /* ─── Animación ──────────────────────────────────────────────────── */
  --fract-t-fast:    0.14s cubic-bezier(0.2, 0.8, 0.2, 1);
  --fract-t:         0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
  --fract-t-slow:    0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
  --fract-spring:    cubic-bezier(0.34, 1.56, 0.64, 1); /* iOS overshoot */
  --fract-ios-blur:  blur(40px) saturate(180%);          /* glass iOS */

  /* ─── Layout ───────────────────────────────────────────────────────── */
  --fract-max-w:     1200px;
  --fract-shell-h:   60px;       /* alto del header */
  --fract-dock-h:    84px;       /* espacio reservado para dock */

  /* ─── Aliases (compat con código heredado de cada superficie) ────── */
  --accent:        var(--fract-accent);
  --accent-2:      var(--fract-accent-2);
  --accent-deep:   var(--fract-accent-deep);
  --accent-soft:   var(--fract-accent-soft);
  --accent-border: var(--fract-accent-border);
  --bg:            var(--fract-bg);
  --bg-elev:       var(--fract-bg-elev);
  --surface:       var(--fract-surface);
  --surface-2:     var(--fract-surface-2);
  --border:        var(--fract-border);
  --border-strong: var(--fract-border-strong);
  --text:          var(--fract-text);
  --text-soft:     var(--fract-text-soft);
  --text-dim:      var(--fract-text-dim);
  --text-faint:    var(--fract-text-faint);
  --font-sans:     var(--fract-font-sans);
  --font-serif:    var(--fract-font-serif);
  --radius:        var(--fract-radius);
  --radius-lg:     var(--fract-radius-lg);
  --shadow-sm:     var(--fract-shadow-sm);
  --shadow-orange: var(--fract-shadow-orange);
  --t:             var(--fract-t);
}

/* Reset universal mínimo */
*, *::before, *::after { box-sizing: border-box; }
html, body {
  background: var(--fract-bg);
  color: var(--fract-text);
  font-family: var(--fract-font-sans);
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
}
::selection { background: rgba(255,122,41,0.35); color: var(--fract-text); }

/* Botones canónicos (cualquier .fract-btn obtiene la marca consistente) */
.fract-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 20px; border-radius: var(--fract-radius-pill);
  font-family: inherit; font-size: 14px; font-weight: 600; letter-spacing: -0.005em;
  cursor: pointer; border: none; transition: all var(--fract-t);
  text-decoration: none; line-height: 1.2;
}
.fract-btn-primary {
  background: linear-gradient(135deg, var(--fract-accent), var(--fract-accent-2));
  color: #fff; box-shadow: var(--fract-shadow-orange);
}
.fract-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 18px 36px -8px rgba(255,122,41,0.65); }
.fract-btn-ghost {
  background: var(--fract-bg-elev); color: var(--fract-text);
  border: 1px solid var(--fract-border-strong);
}
.fract-btn-ghost:hover { border-color: var(--fract-accent-border); color: var(--fract-accent-deep); }

/* Cards canónicas */
.fract-card {
  background: var(--fract-bg-elev); border: 1px solid var(--fract-border);
  border-radius: var(--fract-radius-lg); box-shadow: var(--fract-shadow-sm);
  padding: 22px; transition: all var(--fract-t);
}
.fract-card:hover { border-color: var(--fract-border-strong); }

/* Spacers para que header/dock no oculten contenido */
body[data-fract-shell] { padding-top: 0; padding-bottom: var(--fract-dock-h); }
@media (max-width: 780px) {
  body[data-fract-shell] { padding-bottom: calc(var(--fract-dock-h) + env(safe-area-inset-bottom, 0)); }
}

/* ============================================================================
 * MODO OSCURO ADAPTATIVO — Ley suprema 2026-04-28
 * ============================================================================
 * 3 modos que el usuario controla via toggle (FractTheme.set):
 *   • auto  → respeta prefers-color-scheme del sistema (default)
 *   • light → forzado claro
 *   • dark  → forzado oscuro
 *
 * Persistencia: localStorage.fract.theme
 * Manejo: js/fract-theme.js (auto-cargado por fract-shell.js)
 * ============================================================================ */

/* Modo oscuro forzado por toggle (data-theme="dark") */
[data-theme="dark"] {
  /* ─── Marca (ligeramente más cálida en oscuro para no agredir) ─────── */
  --fract-accent:        #FF8A3D;
  --fract-accent-2:      #FFA866;
  --fract-accent-deep:   #FF7A29;
  --fract-accent-soft:   rgba(255,138,61,0.16);
  --fract-accent-border: rgba(255,138,61,0.42);
  --fract-accent-glow:   rgba(255,138,61,0.55);

  /* ─── Fondos / superficies ────────────────────────────────────────── */
  --fract-bg:            #0E0E10;
  --fract-bg-elev:       #1A1A1D;
  --fract-surface:       #16161A;
  --fract-surface-2:     #202024;

  /* ─── Bordes ──────────────────────────────────────────────────────── */
  --fract-border:        rgba(255,255,255,0.10);
  --fract-border-strong: rgba(255,255,255,0.18);

  /* ─── Texto ────────────────────────────────────────────────────────── */
  --fract-text:          #F5F5F3;
  --fract-text-soft:     #C8CAD0;
  --fract-text-dim:      #9A9DA5;
  --fract-text-faint:    #6B6E76;

  /* ─── Estados / feedback (más vivos en dark) ──────────────────────── */
  --fract-green:         #34D27A;
  --fract-red:           #FF5C53;
  --fract-yellow:        #FFB546;
  --fract-blue:          #60A5FA;
  --fract-gold:          #E5B23B;

  /* ─── Sombras (en oscuro casi invisibles, usar glow) ──────────────── */
  --fract-shadow-sm:    0 1px 2px rgba(0,0,0,0.45), 0 4px 12px -2px rgba(0,0,0,0.35);
  --fract-shadow-md:    0 6px 18px -4px rgba(0,0,0,0.55);
  --fract-shadow-lg:    0 24px 48px -16px rgba(0,0,0,0.65);
  --fract-shadow-orange: 0 12px 28px -10px rgba(255,138,61,0.50);
}

/* Modo automático = sigue al sistema, salvo override manual data-theme="light" */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --fract-accent:        #FF8A3D;
    --fract-accent-2:      #FFA866;
    --fract-accent-deep:   #FF7A29;
    --fract-accent-soft:   rgba(255,138,61,0.16);
    --fract-accent-border: rgba(255,138,61,0.42);
    --fract-accent-glow:   rgba(255,138,61,0.55);

    --fract-bg:            #0E0E10;
    --fract-bg-elev:       #1A1A1D;
    --fract-surface:       #16161A;
    --fract-surface-2:     #202024;

    --fract-border:        rgba(255,255,255,0.10);
    --fract-border-strong: rgba(255,255,255,0.18);

    --fract-text:          #F5F5F3;
    --fract-text-soft:     #C8CAD0;
    --fract-text-dim:      #9A9DA5;
    --fract-text-faint:    #6B6E76;

    --fract-green:         #34D27A;
    --fract-red:           #FF5C53;
    --fract-yellow:        #FFB546;
    --fract-blue:          #60A5FA;
    --fract-gold:          #E5B23B;

    --fract-shadow-sm:    0 1px 2px rgba(0,0,0,0.45), 0 4px 12px -2px rgba(0,0,0,0.35);
    --fract-shadow-md:    0 6px 18px -4px rgba(0,0,0,0.55);
    --fract-shadow-lg:    0 24px 48px -16px rgba(0,0,0,0.65);
    --fract-shadow-orange: 0 12px 28px -10px rgba(255,138,61,0.50);
  }
}

/* ─── Toggle de tema (sol / luna / círculo medio) ─────────────────────────
 * Botón circular que monta fract-theme.js dentro de cualquier .fract-header-actions
 * o automáticamente al lado del pill del shell. Heredable.
 * ──────────────────────────────────────────────────────────────────────── */
.fract-theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  background: var(--fract-bg-elev); color: var(--fract-text);
  border: 1px solid var(--fract-border); border-radius: 50%;
  cursor: pointer; padding: 0; font-family: inherit;
  transition: all var(--fract-t);
  flex-shrink: 0;
}
.fract-theme-toggle:hover {
  border-color: var(--fract-accent-border);
  color: var(--fract-accent);
  transform: translateY(-1px);
}
.fract-theme-toggle i { font-size: 17px; line-height: 1; }
.fract-theme-toggle[data-mode="auto"]  { color: var(--fract-text-dim); }
.fract-theme-toggle[data-mode="light"] { color: var(--fract-yellow); }
.fract-theme-toggle[data-mode="dark"]  { color: var(--fract-blue); }

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* Smooth transition al cambiar tema (sin flicker) */
html { color-scheme: light dark; }
[data-theme="dark"] { color-scheme: dark; }
[data-theme="light"] { color-scheme: light; }
html, body, .fract-card, .fract-shell, .fract-shell-pill, .fract-shell-menu {
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}