/*
 * Palette — the "Moonrise Index" colours, ported from theme/Palette.kt.
 *
 * The design expresses its blues in OKLCH; browsers support oklch() natively,
 * so unlike the Compose port these stay in their original notation. The
 * foreground tints are alpha over --chalk so the relationship stays visible
 * instead of being baked into blends.
 */
:root {
    /* Base */
    --ink: #0a0b0e;               /* page background */
    --chalk: #e9eaee;             /* primary foreground, solid-button fill */
    --slate: #232426;             /* body of the phone mock */

    --accent: oklch(0.82 0.06 250);        /* eyebrows, "Explore", live grid cell */
    --glow-core: oklch(0.9 0.03 250);      /* bright core of the hero glow */
    --glow-edge: oklch(0.72 0.06 265);     /* cooler falloff of the hero glow */
    --moon-highlight: oklch(0.93 0.02 250);
    --moon-shade: oklch(0.8 0.04 260);
    --mark-edge: #cbd5e3;

    /* Foreground tints — alpha over --chalk */
    --text-primary: var(--chalk);
    --text-secondary: rgb(233 234 238 / 0.72);
    --text-muted: rgb(233 234 238 / 0.62);
    --text-body: rgb(233 234 238 / 0.60);
    --text-body-dim: rgb(233 234 238 / 0.58);
    --text-faint: rgb(233 234 238 / 0.55);
    --text-label: rgb(233 234 238 / 0.45);
    --text-placeholder: rgb(233 234 238 / 0.42);
    --text-footnote: rgb(233 234 238 / 0.40);
    --text-disabled: rgb(233 234 238 / 0.38);

    /* Hairlines and fills */
    --divider: rgb(255 255 255 / 0.09);
    --outline-subtle: rgb(255 255 255 / 0.18);
    --outline-input: rgb(255 255 255 / 0.20);
    --outline-card: rgb(255 255 255 / 0.16);
    --outline-media: rgb(255 255 255 / 0.12);
    --outline-checkbox: rgb(255 255 255 / 0.30);

    --chip-selected-outline: rgb(233 234 238 / 0.40);
    --chip-selected-fill: rgb(233 234 238 / 0.08);

    --hatch: rgb(255 255 255 / 0.07);

    /* Form error: the accent hue rotated warm at the same lightness/chroma. */
    --warning: oklch(0.82 0.06 25);

    /* --- Floating surfaces ---------------------------------------------
     * Ink-tinted rather than white-tinted: the page background is a photo, and
     * a white veil would grey it out instead of darkening it.
     */
    --surface-fill: rgb(16 18 23 / 0.62);
    --surface-fill-opaque: rgb(16 18 23 / 0.96);
    --surface-outline: rgb(233 234 238 / 0.10);
    --surface-shadow: 0 18px 44px -26px rgb(0 0 0 / 0.9);

    /* The scrim over the background image; without it the copy loses contrast. */
    --backdrop-scrim: rgb(10 11 14 / 0.78);
}