/* ===========================================================================
   sf-vibe.css — the tungstenskylark.co.uk feel, applied to SkylarkStream.
   Component recipes ported from the site's site.css (buttons, segmented
   control, cards, hero, kicker labels) bridged onto our Tailwind markup.
   Colours flow from --th-* tokens (tokens.css) via the --ts-* role layer.
   =========================================================================== */

/* --ts-* role layer — appearance: light slots by default, dark overrides.
   Structurally identical to ts-brand.css on tungstenskylark.co.uk:
   :root = light, html[data-appearance] flips slots, media query drives
   'auto' following the system preference. --------------------------------- */
:root {
    color-scheme: light dark;

    --ts-bg: var(--th-bg-l);
    --ts-surface: var(--th-surface-l);
    --ts-text: var(--th-text-l);
    --ts-accent: var(--th-accent-l);
    --ts-accent-soft: var(--th-accent-soft-l);
    --ts-accent-ink: var(--th-ink-l);

    --ts-text-soft: color-mix(in srgb, var(--ts-text) 62%, transparent);
    --ts-line: color-mix(in srgb, var(--ts-text) 16%, transparent);
    --ts-line-strong: color-mix(in srgb, var(--ts-text) 30%, transparent);
    --ts-glow: color-mix(in srgb, var(--ts-accent-soft) 24%, transparent);
    --ts-glow-strong: color-mix(in srgb, var(--ts-accent-soft) 42%, transparent);

    --font-display: 'Chakra Petch', 'Avenir Next', 'Segoe UI', sans-serif;
    --font-mono: 'Space Mono', ui-monospace, 'SF Mono', Menlo, monospace;

    --sp-1: 8px;  --sp-2: 16px; --sp-3: 24px; --sp-4: 32px;
    --sp-5: 48px; --sp-6: 64px; --sp-7: 96px;
    --radius: 12px;
}

html[data-appearance='dark'] {
    color-scheme: dark;
    --ts-bg: var(--th-bg-d);
    --ts-surface: var(--th-surface-d);
    --ts-text: var(--th-text-d);
    --ts-accent: var(--th-accent-d);
    --ts-accent-soft: var(--th-accent-soft-d);
    --ts-accent-ink: var(--th-ink-d);
}

html[data-appearance='light'] {
    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    html[data-appearance='auto'],
    html:not([data-appearance]) {
        color-scheme: dark;
        --ts-bg: var(--th-bg-d);
        --ts-surface: var(--th-surface-d);
        --ts-text: var(--th-text-d);
        --ts-accent: var(--th-accent-d);
        --ts-accent-soft: var(--th-accent-soft-d);
        --ts-accent-ink: var(--th-ink-d);
    }
}

/* ------------------------------------------------------------- base text */

body {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: var(--ts-text);
    background-color: var(--ts-bg);
    background-image: linear-gradient(
        180deg,
        var(--ts-bg) 0%,
        color-mix(in srgb, var(--ts-accent-soft) 7%, var(--ts-bg)) 100%
    );
    background-attachment: fixed;
    transition: background-color 0.3s ease, color 0.3s ease;
}

h1, h2, h3, h4 {
    font-family: var(--font-display);
    line-height: 1.2;
}

/* Global focus ring — site recipe ------------------------------------------- */
:focus-visible {
    outline: 2px solid var(--ts-accent);
    outline-offset: 3px;
    border-radius: 4px;
}

::selection {
    background: var(--ts-glow-strong);
}

/* Buttons — the site's .btn recipe, verbatim dimensions -------------------- */

.sf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-1);
    min-height: 44px;
    padding: 0 var(--sp-3);
    border-radius: 8px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.15s ease, background-color 0.2s ease,
                box-shadow 0.2s ease, color 0.2s ease;
}
.sf-btn-primary {
    background: var(--ts-accent);
    color: var(--ts-accent-ink);
}
.sf-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 24px var(--ts-glow-strong);
}
.sf-btn-ghost {
    border: 1px solid var(--ts-line-strong);
    color: var(--ts-text);
    background: transparent;
}
.sf-btn-ghost:hover {
    border-color: var(--ts-accent);
    color: var(--ts-accent);
}

/* Semantic destructive action — red stays the reserved lane for
   LIVE/error, so destructive buttons are chip-style: neutral surface,
   red TEXT + border only, never a filled red button. --------------------- */
.sf-btn-danger {
    border: 1px solid rgba(255, 85, 85, 0.45);
    color: #FF5555;
    background: transparent;
}
.sf-btn-danger:hover {
    border-color: #FF5555;
    box-shadow: 0 6px 24px rgba(255, 85, 85, 0.25);
}

/* Approve/positive actions — theme-neutral (no green fills; green
   is not in the brand palette — follow the theme accent). ---------------- */
.sf-btn-ok {
    border: 1px solid var(--ts-line-strong);
    color: var(--ts-text);
    background: transparent;
}
.sf-btn-ok:hover {
    border-color: var(--ts-accent);
    color: var(--ts-accent);
}

/* Small inline action buttons (manage tables, tab strips) ------------------ */
.sf-btn-sm {
    min-height: 32px;
    font-size: 12px;
    padding: 0 var(--sp-2);
    letter-spacing: 0.06em;
    border-radius: 6px;
}

/* Segmented Auto/Day/Night control — site .seg recipe ----------------------- */
.appearance {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
}
.appearance-label {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ts-text-soft);
}
.seg {
    display: inline-flex;
    border: 1px solid var(--ts-line-strong);
    border-radius: 8px;
    overflow: hidden;
    background: color-mix(in srgb, var(--ts-bg) 86%, transparent);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}
.seg button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 36px;
    color: var(--ts-text-soft);
    background: none;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.seg button + button { border-left: 1px solid var(--ts-line); }
.seg button[aria-pressed='true'] {
    background: var(--ts-accent);
    color: var(--ts-accent-ink);
}
.seg svg { width: 15px; height: 15px; fill: currentColor; }

/* Floating variant for nav-less pages -------------------------------------- */
#appearance-seg-floating {
    position: fixed;
    bottom: 52px;
    right: 16px;
    z-index: 60;
    opacity: 0.55;
    transition: opacity 0.2s ease;
}
#appearance-seg-floating:hover { opacity: 1; }

/* Glass sticky header (site .site-header recipe) --------------------------- */
#main-nav {
    background: color-mix(in srgb, var(--ts-bg) 86%, transparent) !important;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--ts-line) !important;
}

/* Cards — site .theme-card recipe: lift + glow on hover -------------------- */
.sf-card {
    transition: background-color 0.3s ease, border-color 0.2s ease,
                transform 0.15s ease, box-shadow 0.2s ease;
}
.sf-card:hover {
    transform: translateY(-3px);
    -webkit-box-shadow: 0 12px 40px var(--ts-glow);
    box-shadow: 0 12px 40px var(--ts-glow);
}

/* Hero — radial accent glow + soft base fade (site .hero::before recipe) --- */
.sf-hero {
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--ts-line);
    background: transparent;
}
.sf-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(52% 64% at 78% 42%, var(--ts-glow), transparent 72%),
        linear-gradient(180deg, transparent,
            color-mix(in srgb, var(--ts-accent-soft) 8%, transparent));
    pointer-events: none;
}
.sf-hero > * {
    position: relative;
}

/* Mono micro-labels (site label recipe: mono, uppercase, tracked) --------- */
.ts-label {
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.6875rem; /* 11px */
}
.ts-label-sm {
    letter-spacing: 0.1em;
}

/* Kicker — site recipe (accent mono intro line) ----------------------------- */
.kicker {
    font-family: var(--font-mono);
    font-size: 13px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ts-accent);
}

/* Theme picker — quiet glass chip, matches header -------------------------- */
#theme-picker {
    -webkit-backdrop-filter: blur(7px) saturate(0.9);
    backdrop-filter: blur(7px) saturate(0.9);
    background: color-mix(in srgb, var(--ts-surface) 60%, transparent);
    color: var(--ts-text);
}

/* Footer — hairline + micro-label, site parity ----------------------------- */
footer {
    border-top: 1px solid var(--ts-line);
}

/* Smooth theme/appearance swaps --------------------------------------------- */
#main-nav, .sf-card, .sf-hero, .seg, .appearance {
    transition: background-color 0.3s ease, border-color 0.3s ease,
                box-shadow 0.2s ease;
}

/* Legacy compat: pages still carrying bg-brand utility classes keep the
   glow treatment (button-equivalents) — fills resolve via the bridged
   Tailwind config to --ts-accent (theme colour, never forced). ------------ */
a.bg-brand, button.bg-brand, input[type="submit"].bg-brand {
    -webkit-box-shadow: 0 6px 24px var(--ts-glow-strong);
    box-shadow: 0 6px 24px var(--ts-glow-strong);
}
a.bg-brand:hover, button.bg-brand:hover, input[type="submit"].bg-brand:hover {
    transform: translateY(-1px);
    -webkit-box-shadow: 0 12px 40px var(--ts-glow-strong);
    box-shadow: 0 12px 40px var(--ts-glow-strong);
}

/* Help page: call-out note (accent-soft tint, accent left rule) ------------ */
.sf-note {
    background: var(--ts-accent-soft);
    border-left: 3px solid var(--ts-accent);
    padding: 0.9rem 1.1rem;
    border-radius: 8px;
}

/* Help page: copyable value chip ------------------------------------------- */
.copy-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--ts-surface);
    border: 1px solid var(--ts-line);
    border-radius: 8px;
    padding: 0.25rem 0.35rem 0.25rem 0.75rem;
    margin: 0.15rem 0;
}
.copy-chip code {
    font-size: 0.85em;
    color: var(--ts-text);
}

/* Help page: settings table rows -------------------------------------------- */
.sf-table tbody tr:hover {
    background: color-mix(in srgb, var(--ts-accent-soft) 60%, transparent);
}

/* Category / metadata chip --------------------------------------------------- */
.sf-chip {
    display: inline-block;
    background: var(--ts-accent-soft);
    color: var(--ts-text);
    border: 1px solid var(--ts-line);
    border-radius: 999px;
    padding: 0.1rem 0.6rem;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
}