/* ADAR Manga Tema Plus — Design Tokens */
:root {
    /* ── Colores base ── */
    --color-bg:           #0d0d0d;
    --color-bg-card:      #161616;
    --color-bg-elevated:  #1e1e1e;
    --color-bg-overlay:   rgba(0,0,0,.75);
    --color-border:       rgba(255,255,255,.08);
    --color-border-hover: rgba(255,255,255,.16);

    /* ── Texto ── */
    --color-text:         #e8e8e8;
    --color-text-muted:   #8a8a8a;
    --color-text-faint:   #555;

    /* ── Acento principal ── */
    --color-accent:       #e63946;
    --color-accent-hover: #ff4d5a;
    --color-accent-dark:  #b32232;

    /* ── Acento secundario ── */
    --color-secondary:    #f4a261;

    /* ── Estado ── */
    --color-success:      #2a9d5c;
    --color-warning:      #e9c46a;
    --color-info:         #4895ef;

    /* ── Tipografía ── */
    --font-body:          'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-display:       'Manga-Title', 'Inter', sans-serif;
    --font-mono:          'JetBrains Mono', 'Fira Code', monospace;

    /* ── Tamaños ── */
    --text-xs:   .75rem;
    --text-sm:   .875rem;
    --text-base: 1rem;
    --text-lg:   1.125rem;
    --text-xl:   1.25rem;
    --text-2xl:  1.5rem;
    --text-3xl:  2rem;

    /* ── Espaciado ── */
    --space-1:  .25rem;
    --space-2:  .5rem;
    --space-3:  .75rem;
    --space-4:  1rem;
    --space-6:  1.5rem;
    --space-8:  2rem;
    --space-12: 3rem;
    --space-16: 4rem;

    /* ── Radios ── */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;

    /* ── Sombras ── */
    --shadow-card:  0 2px 12px rgba(0,0,0,.5);
    --shadow-heavy: 0 8px 32px rgba(0,0,0,.7);

    /* ── Transiciones ── */
    --transition-fast:   150ms ease;
    --transition-normal: 250ms ease;
    --transition-slow:   400ms ease;

    /* ── Layout ── */
    --container-max: 1280px;
    --sidebar-width: 280px;
    --header-height: 70px;

    /* ── Grid de manga ── */
    --grid-cols-sm: 3;
    --grid-cols-md: 4;
    --grid-cols-lg: 6;
    --grid-gap:     var(--space-4);

    /* ── Lector ── */
    --reader-bg:       #0a0a0a;
    --reader-max-width: 900px;
    --toolbar-height:  52px;
}

/* Modo claro (opcional, tema pensado para oscuro) */
@media (prefers-color-scheme: light) {
    :root[data-theme="auto"] {
        --color-bg:         #f5f5f5;
        --color-bg-card:    #ffffff;
        --color-bg-elevated:#ebebeb;
        --color-border:     rgba(0,0,0,.1);
        --color-text:       #1a1a1a;
        --color-text-muted: #666;
    }
}