/* ============================================================
   THEMES
   Semantic variables. Components reference only these, never the
   raw palette, so a theme swap needs no component changes.

   Dark is the default: it is Yuna's own register, and it is what
   a visitor gets before choosing. The toggle switches to light and
   the choice is remembered.
   ============================================================ */

/* ------------------------------------------------------------
   LIGHT — celestial daylight.
   Not plain white: everything is tinted with the indigo of Yuna's
   hair and a pastel violet, with gold kept for highlights only.
   ------------------------------------------------------------ */

:root[data-theme="light"] {
    color-scheme: light;

    /* Un atardecer, no una pagina blanca.
     *
     * El cielo baja de tono y se calienta; las tarjetas se quedan claras.
     * Esa diferencia es la que hace el tema: el fondo da la atmosfera y
     * las tarjetas dan la lectura, en vez de pedirle al blanco que haga
     * las dos cosas y no haga bien ninguna.
     *
     * El blanco puro se fue a proposito. Sobre blanco el oro no puede
     * brillar —nada es mas luminoso que el fondo— y por eso habia que
     * oscurecerlo hasta volverlo marron oliva. Sobre un cielo a media
     * luz, el oro de los destellos, la luna y los filetes vuelve a ser
     * oro sin tener que apagarse. */
    --bg-page: #b9aed2;
    --bg-surface: #f3edf4;
    --bg-surface-sunken: #e7e0f0;
    --bg-surface-hover: #faf6fa;

    /* Text: indigo rather than black, so even body copy carries the hue. */
    /* Tinta de atardecer. Medido: con los valores anteriores el cielo solo
       podia oscurecerse un diez por ciento antes de que el texto apagado
       cayera por debajo de AA; con estos llega al setenta, que es lo que
       convierte el tema claro en un atardecer de verdad en vez de un
       blanco con un fondo un poco mas gris. */
    --text-primary: #1d1838;
    --text-secondary: #3a3458;
    --text-muted: #443d66;
    --text-on-accent: #ffffff;

    /* Accents: indigo leads, violet supports, gold only highlights. */
    --accent: var(--yuna-indigo-500);
    --accent-hover: var(--yuna-indigo-600);
    --accent-soft: #e7e4fa;
    --accent-contrast: var(--yuna-indigo-700);

    --secondary: var(--yuna-violet-500);
    --secondary-soft: #eee6fb;
    --secondary-contrast: #3f2a63;

    /* `--gold` is ink: it must stay readable on the cream surfaces, so it is
       darker than the brand gold. `--gold-bright` is decoration only
       (sparkles, glows) and is never used for text. */
    /* Darkened from #8a6620: gold is small uppercase text on the tinted
       panels (positions, orientations, quote labels), where it measured 4.20.
       The decorative golds live in --yuna-gold-* and are untouched. */
    --gold: #7e5c1c;
    --gold-bright: var(--yuna-gold-500);
    --gold-ink-mid: #6b4f14;

    /* El color de las etiquetas que tienen que llamar la atencion.
       El oro es un color claro: sobre negro brilla, sobre blanco no puede
       destacar por mucho que se oscurezca. Medido, `--gold` da 6.11 sobre
       una tarjeta clara contra 10.55 en el tema oscuro: legible, pero con
       la mitad de fuerza, y por eso las etiquetas se veian apagadas.
       De dia informa el violeta, que sobre blanco si tiene cuerpo; el oro
       se queda para lo que decora —anillos, reglas, destellos—, que es
       donde sigue funcionando. */
    --accent-ink: var(--secondary-contrast);
    --gold-soft: #faf0d6;

    /* Lines, tinted so borders are never neutral grey. */
    --border: rgba(67, 74, 168, 0.14);
    --border-strong: rgba(67, 74, 168, 0.26);
    --border-accent: rgba(127, 91, 196, 0.42);

    /* Elevation: shadows carry the indigo too. */
    /* Deeper than they were. On the old near-white page a card separated by
       luminance alone; on the lavender one the shadow is what makes a white
       card read as a card, and it costs nothing in text contrast. */
    /* Mas marcadas de lo que pedia el buen gusto, y a proposito. Una
       tarjeta blanca sobre un fondo lavanda no se separa por luminancia:
       la sombra es lo unico que dice que esta encima y no pintada. Con
       los valores de antes los paneles se leian como rectangulos planos
       recortados en la pagina. */
    --shadow-sm: 0 1px 2px rgba(36, 31, 71, 0.08), 0 4px 12px rgba(36, 31, 71, 0.10);
    --shadow-md: 0 2px 6px rgba(36, 31, 71, 0.12), 0 12px 30px rgba(36, 31, 71, 0.16);
    --shadow-lg: 0 8px 20px rgba(36, 31, 71, 0.16), 0 28px 60px rgba(36, 31, 71, 0.24);

    --glow-moon: 0 0 30px rgba(127, 91, 196, 0.26);
    --glow-accent: 0 0 0 3px rgba(127, 91, 196, 0.22);
    --glow-card: 0 0 0 1px rgba(127, 91, 196, 0.38), 0 12px 32px rgba(36, 31, 71, 0.14);

    --success: var(--yuna-success);
    --danger: var(--yuna-danger);
    --warning: var(--yuna-warning);
    --info: var(--yuna-info);

    /* Chrome: a deep indigo bar, not a white strip. */
    /* Not a flat band: a violet bloom rising from the left and an indigo
       one sinking at the right, over a diagonal base. Three still layers,
       so it reads as depth without a single frame of animation. */
    --nav-bg:
        radial-gradient(
            120% 220% at 12% -60%,
            rgba(127, 91, 196, 0.45),
            transparent 62%
        ),
        radial-gradient(
            90% 180% at 88% 160%,
            rgba(67, 74, 168, 0.42),
            transparent 58%
        ),
        linear-gradient(112deg, #262a5e 0%, #343a86 52%, #3f3a8c 100%);
    --nav-text: #e9e6fa;
    --nav-text-strong: #ffffff;
    --nav-text-muted: #d2cdef;
    --nav-hover: rgba(255, 255, 255, 0.12);
    --nav-border: rgba(36, 31, 71, 0.2);

    --overlay: rgba(36, 31, 71, 0.45);
}

/* ------------------------------------------------------------
   DARK — mystical night. The default.
   Applied to :root so it wins before any attribute is set, and
   repeated under [data-theme="dark"] for the explicit choice.
   ------------------------------------------------------------ */

:root,
:root[data-theme="dark"] {
    color-scheme: dark;

    --bg-page: var(--yuna-indigo-950);
    --bg-surface: #1b1c3a;
    --bg-surface-sunken: #101128;
    --bg-surface-hover: #262751;

    --text-primary: #ece9f8;
    --text-secondary: #b3afd0;
    /* Lifted from #8782a6: on the tinted panel it fell to 3.65, under AA. */
    --text-muted: #a8a3c4;
    /* The accent is a light violet here, so filled controls take dark ink;
       white on it measured 3.46, below the 4.5 AA threshold. */
    --text-on-accent: #14122b;

    --accent: var(--yuna-violet-400);
    --accent-hover: var(--yuna-violet-300);
    --accent-soft: rgba(154, 120, 218, 0.16);
    --accent-contrast: var(--yuna-violet-200);

    --secondary: var(--yuna-indigo-300);
    --secondary-soft: rgba(135, 147, 222, 0.16);
    --secondary-contrast: var(--yuna-indigo-200);

    --gold: var(--yuna-gold-300);
    --gold-bright: var(--yuna-gold-200);
    --gold-ink-mid: #f6ebc4;

    /* De noche el oro hace las dos cosas: brilla sobre el indigo. */
    --accent-ink: var(--gold);
    --gold-soft: rgba(232, 205, 120, 0.14);

    --border: rgba(214, 198, 243, 0.14);
    --border-strong: rgba(214, 198, 243, 0.26);
    --border-accent: rgba(184, 159, 232, 0.42);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.45), 0 10px 26px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 6px 18px rgba(0, 0, 0, 0.5), 0 24px 56px rgba(0, 0, 0, 0.45);

    --glow-moon: 0 0 44px rgba(232, 205, 120, 0.3);
    --glow-accent: 0 0 0 3px rgba(154, 120, 218, 0.3);
    --glow-card: 0 0 0 1px rgba(232, 205, 120, 0.45), 0 0 28px rgba(154, 120, 218, 0.28);

    /* Lighter than the day pair: on a dark panel the ink versions measured
       2.93 and 2.53, under the 3.0 that a mark carrying meaning needs. */
    --success: #5fbf7a;
    --danger: #e8707a;
    --warning: var(--yuna-warning);
    --info: var(--yuna-info);

    --nav-bg:
        radial-gradient(
            120% 220% at 12% -60%,
            rgba(154, 120, 218, 0.24),
            transparent 62%
        ),
        radial-gradient(
            90% 180% at 88% 160%,
            rgba(232, 205, 120, 0.12),
            transparent 58%
        ),
        linear-gradient(
            112deg,
            rgba(12, 12, 30, 0.94) 0%,
            rgba(20, 21, 48, 0.9) 52%,
            rgba(28, 24, 58, 0.88) 100%
        );
    --nav-text: #ddd9f3;
    --nav-text-strong: #ffffff;
    --nav-text-muted: #aca6d4;
    --nav-hover: rgba(214, 198, 243, 0.1);
    --nav-border: rgba(214, 198, 243, 0.12);

    --overlay: rgba(6, 6, 18, 0.66);
}

/* ------------------------------------------------------------
   Per-card accent, driven by `Card.dominantColor`.
   ------------------------------------------------------------ */

.accent-red    { --card-accent: #c94f4b; }
.accent-brown  { --card-accent: #8b6349; }
.accent-orange { --card-accent: #dc8439; }
.accent-gold   { --card-accent: #c79a45; }
.accent-yellow { --card-accent: #d7bd45; }
.accent-green  { --card-accent: #55966b; }
.accent-teal   { --card-accent: #438f8c; }
.accent-blue   { --card-accent: #4e86ad; }
.accent-purple { --card-accent: #7b598a; }
.accent-white  { --card-accent: #b9b4c2; }
.accent-black  { --card-accent: #3a3645; }
.accent-grey   { --card-accent: #9b979e; }

/* ------------------------------------------------------------
   CELESTIAL SURFACES

   The tinted panel was hand-written in six places with a
   different angle and a different mix each time, which is why
   the screens never quite matched. One definition here; both
   themes resolve it from their own --accent and --secondary.
   ------------------------------------------------------------ */

:root {
    --surface-celestial:
        radial-gradient(
            120% 90% at 12% 0%,
            color-mix(in srgb, var(--gold) var(--celestial-glint), transparent),
            transparent 62%
        ),
        linear-gradient(
            150deg,
            color-mix(in srgb, var(--secondary) var(--celestial-tint), var(--bg-surface)),
            color-mix(in srgb, var(--accent) var(--celestial-tint-2), var(--bg-surface))
        );

    /* For the one panel a screen is built around. */
    --surface-celestial-strong:
        radial-gradient(
            120% 90% at 12% 0%,
            color-mix(in srgb, var(--gold) var(--celestial-glint-strong), transparent),
            transparent 62%
        ),
        linear-gradient(
            150deg,
            color-mix(in srgb, var(--secondary) var(--celestial-tint-strong), var(--bg-surface)),
            color-mix(in srgb, var(--accent) var(--celestial-tint-strong-2), var(--bg-surface))
        );

    /* Tint strengths. These are the night values; day overrides them below. */
    --celestial-tint: 10%;
    --celestial-tint-2: 7%;
    --celestial-tint-strong: 15%;
    --celestial-tint-strong-2: 10%;
    --celestial-glint: 9%;
    --celestial-glint-strong: 14%;

    /* A hairline of gold inside the border, never a second border. */
    --ring-gold: inset 0 0 0 1px color-mix(in srgb, var(--gold) 18%, transparent);
    --ring-gold-strong: inset 0 0 0 1px color-mix(in srgb, var(--gold) 34%, transparent);
}

/* By day a violet tint darkens a white card back towards the page, which is
   how the cards stopped reading as cards at all. Day keeps the tint to a
   whisper and lets the deeper page do the separating. */
:root[data-theme="light"] {
    --celestial-tint: 4%;
    --celestial-tint-2: 3%;
    --celestial-tint-strong: 7%;
    --celestial-tint-strong-2: 5%;
    --celestial-glint: 5%;
    --celestial-glint-strong: 9%;
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) {
        --celestial-tint: 4%;
        --celestial-tint-2: 3%;
        --celestial-tint-strong: 7%;
        --celestial-tint-strong-2: 5%;
        --celestial-glint: 5%;
        --celestial-glint-strong: 9%;
    }
}