/* =========================================================
   AMERI DESIGN SYSTEM — THEME & VARIABLES
   Inspirado en el menú y loader: Obsidiana pura, blanco de alto contraste y acentos sutiles.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
    /* Paleta Principal */
    --bg-main: #0a0a0a;
    --bg-sidebar: #0e0f13;
    --bg-card: #121216;
    --bg-card-hover: #16171d;
    --bg-input: #15161c;
    --bg-dock-pill: #1a1b22;

    /* Acentos */
    --accent-rose: #f472b6;
    --accent-pink: #cf8ca1;
    --accent-pink-hover: #db9fb1;
    --accent-emerald: #10b981;
    --accent-amber: #f59e0b;
    --accent-red: #ef4444;
    --accent-sky: #38bdf8;

    /* Tipografía y Contraste */
    --text-primary: #ffffff;
    --text-secondary: #9499ad;
    --text-muted: #5e6375;
    --text-dark: #08080a;

    /* Bordes y Sombras */
    --border-subtle: rgba(255, 255, 255, 0.06);
    --border-hover: rgba(255, 255, 255, 0.12);
    --border-active: rgba(244, 114, 182, 0.35);

    /* Radios */
    --radius-sm: 6px;
    --radius-md: 9px;
    --radius-lg: 14px;
    --radius-full: 9999px;

    /* Fuentes */
    --font-main: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

/* =========================================================
   LIGHT MODE — activado con [data-theme="light"] en <html>
   (ver /static/scripts/theme.js y /static/styles/theme-light.css
   para los overrides de componentes con color fijo)
   ========================================================= */
:root[data-theme="light"] {
    --bg-main: #f1eef1;
    --bg-sidebar: #ffffff;
    --bg-card: #ffffff;
    --bg-card-hover: #f7f5f7;
    --bg-input: #f8f7f9;
    --bg-dock-pill: #ececee;

    --accent-rose: #d6447f;
    --accent-pink: #b8577c;
    --accent-pink-hover: #a34a6c;
    --accent-emerald: #0ea472;
    --accent-amber: #b7791f;
    --accent-red: #dc2626;
    --accent-sky: #0284c7;

    --text-primary: #1a1720;
    --text-secondary: #6b6670;
    --text-muted: #938e98;
    --text-dark: #08080a;

    --border-subtle: rgba(0, 0, 0, 0.08);
    --border-hover: rgba(0, 0, 0, 0.14);
    --border-active: rgba(184, 87, 124, 0.35);
}

:root[data-theme="light"] body {
    background-color: var(--bg-main);
    background: radial-gradient(ellipse at bottom, #f9dde9 0%, #f0ecf0 100%) fixed;
}

:root[data-theme="light"] ::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
}
:root[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.25);
}

/* El degradado "se apaga" hacia el color de fondo (en dark termina casi
   negro, fundiéndose con el bg oscuro). En light tiene que terminar en
   blanco/casi blanco para lograr el mismo efecto sobre el fondo claro. */
:root[data-theme="light"] .text-gradient-brand {
    background: linear-gradient(to right, #c2577e 0%, #ddd0d7 100%);
    background-size: 100% 100%;
    -webkit-background-clip: text;
    background-clip: text;
}

/* Signature gradient text (landing page hero treatment) — estático, sin animación */
.text-gradient-brand {
    background: linear-gradient(to right, #fc98bc 0%, #341634 100%);
    background-size: 100% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    display: inline-block;
}

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--bg-main);
    background: radial-gradient(ellipse at bottom, #0e090b 0%, #080808 100%) fixed;
    color: var(--text-primary);
    font-family: var(--font-main);
    font-size: 14px;
    line-height: 1.5;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* Scrollbar Minimalista */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.22);
}