/*
    Ahkila Reader — design tokens.

    From design_handoff_ahkila_theme/tokens.css, with one deliberate difference: the colours that a
    theme is allowed to change are read from MudBlazor's palette rather than hard-coded. The handoff
    says themes swap ground and accent only, and the eight named palettes stay as they are — so
    binding those two to the palette is what keeps Swamp Thing and Aquaman's Tears working while
    everything else below stays fixed across every theme.

    Fallbacks are the handoff's literal values, so a page that renders before MudBlazor has written
    its variables still looks like the design rather than like nothing.
*/
:root {
    /* --- theme-owned: ground and accent --- */
    --bg: var(--mud-palette-background, #161826);
    --bg-elevated: var(--mud-palette-appbar-background, #1c1e2e);
    --nav-bg: var(--mud-palette-drawer-background, #12141f);
    --surface-card: var(--mud-palette-surface, #1d1f2c);
    --accent: var(--mud-palette-primary, #9184d9);

    --text: var(--mud-palette-text-primary, #e9e9ed);
    --text-muted: var(--mud-palette-text-secondary, rgba(233, 233, 237, .55));

    /*
        Mixed from the accent rather than listed, so every theme gets its own tint ramp instead of
        the reference violet showing through on all eight. The percentages reproduce the handoff's
        values when the accent is #9184d9.
    */
    --accent-200: color-mix(in srgb, var(--accent) 22%, #ffffff);
    --accent-300: color-mix(in srgb, var(--accent) 42%, #ffffff);
    --accent-500: color-mix(in srgb, var(--accent) 92%, #ffffff);
    --accent-700: color-mix(in srgb, var(--accent) 62%, #000000);
    --accent-800: color-mix(in srgb, var(--accent) 42%, var(--bg));
    --accent-900: color-mix(in srgb, var(--accent) 20%, var(--bg));

    /* Surfaces that sit a step off the ground, derived so they follow it. */
    --surface: color-mix(in srgb, var(--surface-card) 80%, var(--text) 6%);

    /*
        Mixed toward the text colour, not toward black, so it steps off the ground in whichever
        direction the ground is not. Mixing 18% black into the page background -- which is what this
        was -- only works on a dark ground, and this palette is a user preference rather than a fixed
        dark theme. Measured across all eight presets: on a light ground it dropped luminance by
        0.331-0.356, which is the mid-grey slab (#c5cbd1 on Ocean) that made every field look
        disabled, and it flattened all eight themes to the same grey; on a dark ground it moved the
        luminance by -0.000, so the fill did nothing at all and the field was carried entirely by its
        outline. Toward the text it is -0.108 light and +0.005 dark: a soft tint that keeps the
        theme's hue, and a faint lift that finally makes a dark field visible.
    */
    --input-bg: color-mix(in srgb, var(--bg) 94%, var(--text));
    --reader-stage: color-mix(in srgb, var(--bg) 76%, #000000);

    --text-faint: color-mix(in srgb, var(--text) 42%, transparent);
    --divider: color-mix(in srgb, var(--text) 16%, transparent);
    --hairline: color-mix(in srgb, var(--text) 12%, var(--surface-card));
    --hairline-strong: color-mix(in srgb, var(--text) 22%, var(--surface-card));

    /* --- fixed across every theme, per the handoff --- */
    --font: "Inter", system-ui, sans-serif;
    --weight-heading: 500;

    /* Compact 0.7x scale. */
    --space-1: 2.8px;
    --space-2: 5.6px;
    --space-3: 8.4px;
    --space-4: 11.2px;
    --space-6: 16.8px;
    --space-8: 22.4px;
    --space-10: 28px;
    --space-12: 33.6px;

    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 14px;

    /* Elevation is a hairline edge plus ambient darkness — never stacked shadows. */
    --edge-card: 0 0 0 1px var(--hairline);
    --edge-cover: 0 0 0 1px var(--hairline-strong), 0 8px 22px rgba(0, 0, 0, .5);
    --edge-raised: 0 0 0 1px color-mix(in srgb, var(--text) 32%, var(--surface-card)), 0 16px 40px rgba(0, 0, 0, .65);
    --glow-accent: 0 0 8px var(--accent);

    --nav-rail-width: 62px;
    --nav-width: 206px;
}

/*
    Freestanding separators fade out over 48px at each end. Only for rules standing on their own —
    a divider inside a dense list keeps its full width.
*/
.rule {
    height: 1px;
    border: 0;
    background: linear-gradient(to right, transparent,
        color-mix(in srgb, var(--text) 14%, transparent) 48px,
        color-mix(in srgb, var(--text) 14%, transparent) calc(100% - 48px), transparent);
}

/* Painted on the tr, not the cell, so the fade spans the whole row. */
.row-rule {
    background: linear-gradient(to right, transparent,
        color-mix(in srgb, var(--text) 8%, transparent) 48px,
        color-mix(in srgb, var(--text) 8%, transparent) calc(100% - 48px), transparent)
        no-repeat bottom / 100% 1px;
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

::selection {
    background: color-mix(in srgb, var(--accent) 30%, transparent);
}