/* ==============================================================
   DOKIDO TRADUCCIONES · VARIABLES.CSS
   Tokens globales del sistema de diseño.
   Estética: MODERNA SUAVE (papel cálido · oscuro sereno)
   - Colores planos (sin degradados)
   - Bordes finos (1px) y esquinas suavemente redondeadas
   - Sombras difusas discretas
   Los valores de acento los recalcula theme.js en tiempo de
   ejecución (setAccent); los de aquí son el respaldo por defecto.
   ============================================================== */

:root {
    /* ---------- Tipografía ---------- */
    --font-body: 'Inter', 'Segoe UI', system-ui, sans-serif;
    --font-display: 'Manrope', 'Segoe UI', system-ui, sans-serif;
    --font-mono: 'Inter', 'Segoe UI', system-ui, sans-serif; /* etiquetas: misma familia que los textos */

    /* ---------- Escala tipográfica ---------- */
    --fs-xs: 11.5px;
    --fs-sm: 13px;
    --fs-base: 14.5px;
    --fs-md: 16px;
    --fs-lg: 18px;
    --fs-xl: 24px;
    --fs-h3: clamp(17px, 1.6vw, 20px);
    --fs-h2: clamp(22px, 2.6vw, 28px);
    --fs-h1: clamp(28px, 4vw, 38px);

    /* ---------- Espaciado y ancho ---------- */
    --sp-2: 8px;
    --sp-4: 16px;
    --sp-5: 24px;
    --content-max: 1600px;

    /* ---------- Radios · suaves y modernos ---------- */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 20px;
    --radius-full: 999px;
    --card-radius: 12px;
    --ui-radius: 10px;

    /* ---------- Grosor de trazo global ---------- */
    --stroke: 1px;
    --border-width: 1px;

    /* ---------- Fondos (oscuro sereno) ---------- */
    --bg: #131419;
    --bg-2: #0f1015;
    --bg-body: var(--bg);
    --bg-sidebar: #17181f;

    --surface: #1b1d25;
    --surface-2: #23252e;
    --surface-3: #2b2e39;
    --surface-solid: #1b1d25;
    --dropdown-bg: #1e2029;

    --item-hover: rgba(255, 255, 255, 0.06);
    --pattern-line: rgba(255, 255, 255, 0);

    /* ---------- Bordes ---------- */
    --border: #292c36;
    --border-2: #333744;
    --border-3: #434858;
    --border-color: var(--border-2);

    /* ---------- Texto ---------- */
    --text: #eef0f5;
    --text-2: #b9beca;
    --text-3: #878d9c;
    --text-muted: #6f7585;
    --text-main: var(--text);
    --text-soft: var(--text-2);

    /* ---------- Acento principal (carmesí akane) ---------- */
    --accent: #d93848;
    --accent-hover: #e15562;
    --accent-light: #f18b95;
    --accent-deep: #7a1f28;
    --accent-glow: rgba(217, 56, 72, 0.30);
    --accent-soft: rgba(217, 56, 72, 0.13);
    --accent-extra-soft: rgba(217, 56, 72, 0.07);
    --accent-color: var(--accent);
    --brand-color: var(--accent);

    /* ---------- Acentos secundarios ---------- */
    --accent-yellow: #d99b32;
    --accent-purple: #a855f7;
    --accent-cyan: #38bdf8;
    --accent-pink: #ff5fa2;
    --accent-lime: #84cc16;

    /* ---------- Estados editoriales ---------- */
    --estado-traduccion: #f59e0b;
    --estado-finalizado: #10b981;
    --estado-retraduccion: #a855f7;
    --estado-nuevo: #3f9de0;
    --success: #10b981;
    --success-soft: rgba(16, 185, 129, 0.16);

    /* ---------- Superficies translúcidas (glass suave) ---------- */
    --glass-bg: rgba(27, 29, 37, 0.82);
    --glass-border: #333744;
    --glass-highlight: rgba(255, 255, 255, 0.05);
    --glass-shadow: rgba(0, 0, 0, 0.5);
    --glass-blur: 14px;

    /* ---------- Sombras difusas ---------- */
    --shadow-ink: rgba(8, 9, 14, 0.55);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.26), 0 1px 3px rgba(0, 0, 0, 0.20);
    --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.26), 0 8px 20px rgba(0, 0, 0, 0.22);
    --shadow-hard-sm: var(--shadow-sm);
    --shadow-hard: 0 2px 8px rgba(0, 0, 0, 0.26), 0 12px 28px rgba(0, 0, 0, 0.26);
    --shadow-hard-lg: 0 4px 14px rgba(0, 0, 0, 0.28), 0 22px 52px rgba(0, 0, 0, 0.32);

    /* ---------- Movimiento ---------- */
    --ease-out: cubic-bezier(0.22, 0.8, 0.36, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-aero: cubic-bezier(0.16, 1, 0.3, 1);
    --transition-fast: 0.16s cubic-bezier(0.22, 0.8, 0.36, 1);
    --transition-base: 0.26s cubic-bezier(0.22, 0.8, 0.36, 1);
    --transition-ease: cubic-bezier(0.22, 0.8, 0.36, 1);

    /* ---------- Capas ---------- */
    --z-content: 1;
    --z-modal: 2000;

    color-scheme: dark;
}

/* ==============================================================
   TEMA CLARO · Papel cálido (estilo editorial japonés)
   ============================================================== */
[data-theme="light"] {
    --bg: #f6f4ee;
    --bg-2: #efece3;
    --bg-sidebar: #f2efe7;

    --surface: #ffffff;
    --surface-2: #faf8f2;
    --surface-3: #f1eee5;
    --surface-solid: #ffffff;
    --dropdown-bg: #ffffff;

    --item-hover: rgba(43, 36, 23, 0.05);
    --pattern-line: rgba(0, 0, 0, 0);

    --border: #e7e2d6;
    --border-2: #d9d3c3;
    --border-3: #c7c0ad;

    --text: #24211c;
    --text-2: #57534a;
    --text-3: #857f72;
    --text-muted: #9a948a;

    --glass-bg: rgba(255, 255, 255, 0.85);
    --glass-border: #e7e2d6;
    --glass-highlight: rgba(255, 255, 255, 0.9);
    --glass-shadow: rgba(43, 36, 23, 0.14);

    --shadow-ink: rgba(43, 36, 23, 0.25);
    --shadow-sm: 0 1px 2px rgba(66, 56, 38, 0.05), 0 1px 3px rgba(66, 56, 38, 0.07);
    --shadow-md: 0 2px 6px rgba(66, 56, 38, 0.06), 0 8px 20px rgba(66, 56, 38, 0.08);
    --shadow-hard-sm: var(--shadow-sm);
    --shadow-hard: 0 2px 8px rgba(66, 56, 38, 0.07), 0 12px 28px rgba(66, 56, 38, 0.10);
    --shadow-hard-lg: 0 4px 14px rgba(66, 56, 38, 0.08), 0 22px 52px rgba(66, 56, 38, 0.12);

    color-scheme: light;
}