/* ==========================================================================
   Fey — the dark theme.
   --------------------------------------------------------------------------
   Loaded last, in both apps. Almost all of it is the tokens again: every
   surface, line and ink in Fey reads from them, so redefining them is most of
   a theme. What follows them is the short list of places that paint a colour
   of their own — a dark tooltip, a white knob, a gradient banner with white
   text — and need telling what to do on a dark page.

   The palette is ink with a violet cast rather than neutral grey: the same
   reason the light theme's shadows are lavender. Lilac leads, peach marks what
   is in motion.

   Applied by the script in each app's <head>, which sets data-theme on <html>
   before the first paint.
   ========================================================================== */

:root[data-theme="dark"] {
    /* ── Brand ── lighter, so it carries on a dark ground. */
    --fey-primary:        #B4A5F7;
    --fey-primary-deep:   #C9BEFB;
    --fey-primary-soft:   rgba(180, 165, 247, 0.08);
    --fey-primary-tint:   rgba(180, 165, 247, 0.18);
    --fey-accent:         #E0A3EE;
    --fey-on-primary:     #17131F;

    /* ── Surfaces ── */
    --fey-paper:          #0D0B13;
    --fey-surface:        #15121D;
    --fey-surface-sunken: #110F18;
    --fey-surface-sunk:   #110F18;
    --fey-veil:           rgba(4, 3, 8, 0.66);

    /* ── Ink ── */
    --fey-ink:            #ECE9F6;
    --fey-ink-soft:       #A7A1BC;
    --fey-ink-faint:      #6E6888;

    /* ── Lines ── */
    --fey-line:           rgba(180, 165, 247, 0.11);
    --fey-line-strong:    rgba(180, 165, 247, 0.26);

    /* ── Signal ── */
    --fey-green:          #5FD39E;
    --fey-green-soft:     rgba(95, 211, 158, 0.12);
    --fey-amber:          #F2AE6B;
    --fey-amber-soft:     rgba(242, 174, 107, 0.13);
    --fey-red:            #F07C7C;
    --fey-red-soft:       rgba(240, 124, 124, 0.12);
    --fey-blue:           #7DB0F2;
    --fey-blue-soft:      rgba(125, 176, 242, 0.12);

    --fey-green-ink:      #7FDDB2;
    --fey-amber-ink:      #F5BD84;
    --fey-red-ink:        #F59A9A;
    --fey-blue-ink:       #9CC3F5;

    /* ── Depth ── on a dark ground a shadow is mostly absence of light; a faint
       lilac rim does more of the work of lifting a card than the shadow does. */
    --fey-lift:    0 1px 2px rgba(0, 0, 0, 0.30), 0 4px 16px rgba(0, 0, 0, 0.25);
    --fey-lift-lg: 0 2px 6px rgba(0, 0, 0, 0.35), 0 18px 48px rgba(0, 0, 0, 0.45);
}

/* ── The atmosphere: the same two pools of light, a little stronger in the dark ── */
[data-theme="dark"] body::before {
    background:
        radial-gradient(ellipse 80% 60% at 12% -5%,  rgba(180, 165, 247, 0.10), transparent 60%),
        radial-gradient(ellipse 70% 50% at 95% 105%, rgba(224, 163, 238, 0.07), transparent 60%);
}

[data-theme="dark"] body::after { opacity: 0.25; }

[data-theme="dark"] ::selection { color: var(--fey-ink); }

/* Form controls the browser draws itself follow the theme. */
[data-theme="dark"] select option { background: var(--fey-surface); color: var(--fey-ink); }

/* ── The product's shell ── */
[data-theme="dark"] .fey-rail { background: rgba(21, 18, 29, 0.72); }
[data-theme="dark"] .fey-auth-canvas {
    background: linear-gradient(155deg, #181428 0%, #0F0D16 55%, #1A1220 100%);
}

/* ── Things that are dark on purpose in the light theme ──
   A toast, a tooltip, a code block: ink-coloured on paper. In the dark they
   would turn light, so they get a raised dark of their own instead. */
[data-theme="dark"] .fey-toast { background: #2A2540; color: var(--fey-ink); box-shadow: 0 0 0 1px var(--fey-line-strong), var(--fey-lift-lg); }
[data-theme="dark"] .fey-toast-good  { background: #1E4D3A; }
[data-theme="dark"] .fey-toast-error { background: #5E2A2A; }
[data-theme="dark"] .fey-prose pre { background: #08070C; border: 1px solid var(--fey-line); }
[data-theme="dark"] .fey-console { background: #08070C; border: 1px solid var(--fey-line); }

/* White knobs and pills that sit on a coloured track. */
[data-theme="dark"] .fey-offer-toggle span { background: var(--fey-ink); }
[data-theme="dark"] .fey-preview-pill { background: rgba(21, 18, 29, 0.92); }

/* ── Banners with white text on the brand gradient ──
   Keep the light theme's deeper brand inside them: the dark theme's lilac is
   made to be read on black, and white text on it would wash out. */
[data-theme="dark"] .fey-arrival,
[data-theme="dark"] .fey-pn-sky,
[data-theme="dark"] .fey-pn-view,
[data-theme="dark"] .fey-cel-badge,
[data-theme="dark"] .fey-cel-primary,
[data-theme="dark"] .fey-pcard-xh-badge,
[data-theme="dark"] .tm-expert,
[data-theme="dark"] .fey-offer-switch-pill {
    --fey-primary:      #8B7EC8;
    --fey-primary-deep: #6B5CA5;
    --fey-accent:       #B57CC4;
}

/* ── The back office ──
   Its rail is the one surface that is ink in the light theme. In the dark it
   stays the darkest thing on screen, a step below the page, and its text keeps
   reading as light: it used --fey-paper for that, which is now near-black. */
[data-theme="dark"] .bo-rail {
    background: #08070C;
    border-right: 1px solid var(--fey-line);
    --fey-paper: #ECE9F6;
}
[data-theme="dark"] .bo-tip { background: #2A2540; color: var(--fey-ink); }

/* ── The theme picker ── */
.fey-theme-pick {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    border-radius: 999px;
    border: 1px solid var(--fey-line);
    background: var(--fey-surface-sunken);
}

.fey-theme-pick button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--fey-ink-soft);
    font-size: 12.5px;
    cursor: pointer;
    transition: background 0.15s var(--fey-ease-soft), color 0.15s var(--fey-ease-soft);
}

.fey-theme-pick button:hover { color: var(--fey-ink); }

[data-theme-pref="system"] .fey-theme-pick [data-mode="system"],
[data-theme-pref="light"] .fey-theme-pick [data-mode="light"],
[data-theme-pref="dark"] .fey-theme-pick [data-mode="dark"] {
    background: var(--fey-surface);
    color: var(--fey-ink);
    box-shadow: var(--fey-lift);
}

.fey-theme-pick.is-compact button { padding: 5px 8px; }
.fey-theme-pick.is-compact span { display: none; }

/* On the back office's rail, which is dark in both themes. */
.bo-rail .fey-theme-pick { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.08); align-self: flex-start; }
.bo-rail .fey-theme-pick button { color: #B9B4C9; }
.bo-rail .fey-theme-pick button:hover { color: #fff; }
[data-theme-pref="system"] .bo-rail .fey-theme-pick [data-mode="system"],
[data-theme-pref="light"] .bo-rail .fey-theme-pick [data-mode="light"],
[data-theme-pref="dark"] .bo-rail .fey-theme-pick [data-mode="dark"] {
    background: rgba(139, 126, 200, 0.30);
    color: #fff;
    box-shadow: none;
}

/* The lit choice, on a dark page: a lift reads as nothing, so it takes the brand tint. */
[data-theme="dark"][data-theme-pref] .fey-theme-pick button[data-mode]:is([data-mode]) { box-shadow: none; }
[data-theme="dark"][data-theme-pref="system"] .fey-theme-pick:not(.bo-rail *) [data-mode="system"],
[data-theme="dark"][data-theme-pref="light"] .fey-theme-pick:not(.bo-rail *) [data-mode="light"],
[data-theme="dark"][data-theme-pref="dark"] .fey-theme-pick:not(.bo-rail *) [data-mode="dark"] {
    background: var(--fey-primary-tint);
    color: var(--fey-primary-deep);
}