/* ==========================================================================
   GameMediaX — Tokens de diseño (fuente única para el sitio y el admin)
   Modo oscuro por defecto. El tema claro está definido pero no se expone
   todavía: varias vistas aún usan colores fijos (ver M1_INFORME.md).
   ========================================================================== */
:root {
    color-scheme: dark;

    /* Marca */
    --orange:         #ff6b1a;
    --orange-dim:     #cc4d00;
    --orange-glow:    rgba(255,107,26,.2);
    --orange-glow-sm: rgba(255,107,26,.1);
    --on-orange:      #ffffff;

    /* Superficies (de más profunda a más elevada) */
    --bg:   #08080a;
    --bg2:  #0f0f12;
    --bg3:  #15151a;
    --bg4:  #1c1c22;
    --bg5:  #242430;

    --glass:        rgba(255,255,255,.03);
    --glass-md:     rgba(255,255,255,.055);
    --glass-bright: rgba(255,255,255,.09);

    --border:        rgba(255,255,255,.06);
    --border-md:     rgba(255,255,255,.11);
    --border-orange: rgba(255,107,26,.25);

    /* Texto */
    --white:      #ededf2;   /* títulos */
    --text:       #c4c4cf;   /* cuerpo */
    --text-dim:   #8f8f9e;
    --text-muted: #6a6a7c;   /* contraste 4.6:1 sobre --bg */

    /* Estados */
    --green:  #3ddc84;
    --yellow: #ffd93d;
    --red:    #f25f5c;
    --blue:   #6ea8ff;
    --purple: #a855f7;       /* acento de creadores */

    --success-bg: rgba(61,220,132,.1);   --success-border: rgba(61,220,132,.3);
    --danger-bg:  rgba(242,95,92,.1);    --danger-border:  rgba(242,95,92,.35);
    --warning-bg: rgba(255,217,61,.08);  --warning-border: rgba(255,217,61,.3);
    --info-bg:    rgba(110,168,255,.08); --info-border:    rgba(110,168,255,.3);

    /* Alias semánticos (algunas vistas los usaban sin que existieran) */
    --accent:    var(--orange);
    --surface:   var(--bg3);
    --surface-2: var(--bg4);

    /* Espaciado y forma */
    --gap:       1.5rem;     /* margen lateral de página */
    --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem;
    --space-5: 1.5rem; --space-6: 2rem;  --space-7: 3rem;
    --radius-sm: 6px; --radius: 10px; --radius-lg: 14px; --radius-pill: 999px;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.3);
    --shadow:    0 8px 24px rgba(0,0,0,.35);
    --shadow-lg: 0 18px 50px rgba(0,0,0,.5);

    /* Tipografía */
    --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-display: 'Barlow Condensed', 'Inter', sans-serif;

    /* Movimiento */
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
    --dur-fast: 150ms;
    --dur-mid:  250ms;
    --dur-slow: 400ms;

    /* Admin */
    --sidebar-w: 220px;
}

@media (max-width: 640px) {
    :root { --gap: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
    :root { --dur-fast: 0ms; --dur-mid: 0ms; --dur-slow: 0ms; }
    html { scroll-behavior: auto !important; }
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Tema claro (preparado; se activa con <html data-theme="light"> cuando todas las vistas usen tokens) */
:root[data-theme="light"] {
    color-scheme: light;
    --bg:   #f6f6f8;  --bg2: #ffffff;  --bg3: #ffffff;  --bg4: #f0f0f4;  --bg5: #e6e6ec;
    --glass: rgba(0,0,0,.025); --glass-md: rgba(0,0,0,.045); --glass-bright: rgba(0,0,0,.07);
    --border: rgba(0,0,0,.08); --border-md: rgba(0,0,0,.14);
    --white: #121218; --text: #2a2a33; --text-dim: #4d4d5a; --text-muted: #62626f;
    --orange: #e45a0c; --orange-dim: #b84500;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.08); --shadow: 0 8px 24px rgba(0,0,0,.08); --shadow-lg: 0 18px 50px rgba(0,0,0,.12);
}

/* Avisos flotantes (usados por app.js en sitio y admin) */
.gmx-toast { position: fixed; left: 50%; bottom: 1.25rem; transform: translateX(-50%); z-index: 9999;
             max-width: min(92vw, 420px); padding: .7rem 1rem; border-radius: var(--radius);
             font: 600 .85rem/1.35 var(--font-body); box-shadow: var(--shadow-lg); transition: opacity .3s; }
.gmx-toast.is-ok    { background: #0f2a1c; color: #86efac; border: 1px solid var(--success-border); }
.gmx-toast.is-error { background: #2a1010; color: #fca5a5; border: 1px solid var(--danger-border); }
.gmx-toast.is-leaving { opacity: 0; }