/* ==========================================================================
   Mythiq.net — UI foundations
   THE single source of truth for design tokens and the shared button
   system. Loaded FIRST by every shell (public header, admin layout,
   account/auth screens) before any page stylesheet.

   Radius scale (site-wide):
     --radius-sm   3px    buttons, chips, tags, small controls
     --radius-md   8px    cards, inputs, tiles
     --radius-lg   10px   modals, panels, page-level containers
     --radius-pill 999px  pills, round chips

   Buttons: one geometry everywhere (.btn + variants below). Hover is a
   recolor only — no translate lifts, site-wide.
   ========================================================================== */

:root {
    /* --- Color tokens (canonical) --- */
    --bg-color: #202125;
    --card-bg: #181819;
    --footer-bg: #121214;
    --text-white: #f7f7f7;
    --text-muted: #7A7A7A;
    --text-light: #cacaca;
    --mythiq-blue: #238FCC;
    --mythiq-hover-blue: #00A2ED;
    --shadow-glow: rgba(0, 162, 237, 0.43);

    /* --- Radius scale (canonical) --- */
    --radius-sm: 3px;
    --radius-md: 8px;
    --radius-lg: 10px;
    --radius-pill: 999px;

    /* --- Focus (canonical) --- */
    --focus-outline-color: var(--mythiq-hover-blue);

    /* --- Fonts & motion --- */
    --font-heading: 'Catamaran', sans-serif;
    --font-body: 'Catamaran', sans-serif;
    --transition-speed: 0.3s;
    --header-height: 66px;
    --header-offset: 16px;

    /* ------------------------------------------------------------------
       Legacy aliases — older sheets consume these names. They resolve to
       the canonical tokens above; do not give them new values of their own.
       ------------------------------------------------------------------ */
    --font: var(--font-heading);
    --a-bg: var(--bg-color);
    --a-panel: var(--card-bg);
    --a-sidebar: var(--footer-bg);
    --a-ink: var(--text-white);
    --a-ink-soft: var(--text-light);
    --a-muted: var(--text-muted);
    --a-faint: #5c5e63;
    --a-line: #303237;
    --a-line-strong: #3b3d42;
    --a-fill: #232428;
    --a-fill-soft: #1d1e21;
    --a-field: #16171a;
    --a-field-disabled: #101113;
    --a-field-line: #43454c;
    --a-accent: var(--mythiq-blue);
    --a-accent-hover: var(--mythiq-hover-blue);
    --a-accent2: var(--mythiq-hover-blue);
    --a-on-accent: #ffffff;
    --a-success: #34d399;
    --a-success-bg: rgba(5, 150, 105, 0.14);
    --a-success-line: rgba(52, 211, 153, 0.32);
    --a-warning: #fbbf24;
    --a-warning-bg: rgba(217, 119, 6, 0.14);
    --a-warning-line: rgba(251, 191, 36, 0.32);
    --a-info: #60a5fa;
    --a-info-bg: rgba(37, 99, 235, 0.14);
    --a-info-line: rgba(96, 165, 250, 0.32);
    --a-danger: #f87171;
    --a-danger-bg: rgba(180, 35, 24, 0.18);
    --a-danger-line: rgba(248, 113, 113, 0.32);
    --a-radius: var(--radius-lg);
    /* Formerly 7px; every remaining consumer is a card/input/chip → md tier */
    --a-radius-sm: var(--radius-md);
    --a-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
    --a-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45);
    --a-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55);
    --a-transition: all 0.16s cubic-bezier(0.4, 0, 0.2, 1);
    --a-focus-ring: 0 0 0 3px rgba(35, 143, 204, 0.35);
    --radius: var(--radius-lg); /* about.css card radius */
}

/* ==========================================================================
   Focus baseline — one idiom for every interactive element. :where keeps
   specificity at zero so components can still override if they must.
   ========================================================================== */
:where(a, button, [role="button"], input, select, textarea, summary):focus-visible {
    outline: 2px solid var(--focus-outline-color);
    outline-offset: 2px;
}

/* ==========================================================================
   Buttons — the one system. Base carries the public-site geometry
   (15/26 padding, 15px heading type, radius-sm). Variants recolor only.
   ========================================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 15px;
    line-height: 15px;
    padding: 15px 26px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    background: none;
    transition: background-color var(--transition-speed),
                border-color var(--transition-speed),
                color var(--transition-speed);
}

.btn[hidden] { display: none; }

.btn:disabled,
.btn[disabled] {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: transparent;
    color: var(--text-muted);
    cursor: not-allowed;
}

/* Primary — solid Mythiq blue */
.btn-primary {
    background-color: var(--mythiq-blue);
    color: #fff;
}
.btn-primary:hover {
    background-color: var(--mythiq-hover-blue);
    color: #fff;
}
.btn-primary:disabled,
.btn-primary[disabled] {
    background-color: rgba(255, 255, 255, 0.08);
    color: var(--text-muted);
}

/* Ghost — hairline border on transparent */
.btn-ghost {
    background-color: transparent;
    border-color: rgba(255, 255, 255, 0.18);
    color: var(--text-white);
}
.btn-ghost:hover {
    background-color: transparent;
    border-color: var(--mythiq-hover-blue);
    color: var(--mythiq-hover-blue);
}

/* Outline — ghost's faintly filled sibling */
.btn-outline {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.18);
    color: var(--text-light);
}
.btn-outline:hover {
    border-color: var(--mythiq-hover-blue);
    color: var(--mythiq-hover-blue);
}
.btn-outline[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Danger — red signal, functional only */
.btn-danger {
    background-color: transparent;
    color: var(--a-danger);
    border-color: var(--a-danger-line);
}
.btn-danger:hover {
    background-color: var(--a-danger-bg);
    border-color: var(--a-danger);
    color: var(--a-danger);
}
.btn-danger-solid {
    background-color: var(--a-danger);
    color: #fff;
    border-color: var(--a-danger);
}
.btn-danger-solid:hover {
    background-color: #8a1a11;
    border-color: #8a1a11;
    color: #fff;
}

/* Sizes & layout modifiers */
.btn-lg {
    padding: 20px 40px;
    font-size: 18px;
    line-height: 18px;
    font-weight: 400;
}
.btn-sm {
    gap: 8px;
    padding: 10px 18px;
    font-size: 14px;
    line-height: 14px;
}
.btn-block {
    display: flex;
    width: 100%;
    /* Stacked-block buttons need air below them when they sit in flowing
       content (the mods panels rely on it). */
    margin-bottom: 10px;
}
.btn-icon {
    width: 42px;
    height: 42px;
    padding: 0;
    flex: 0 0 auto;
}

/* Compact tier — official second size context. The CMS/auth shells
   (body.admin) are dense interfaces; their buttons run one step smaller.
   Same variants, same hover/focus behavior, one size step down. */
body.admin .btn {
    gap: 8px;
    padding: 10px 18px;
    font-size: 14px;
    line-height: 14px;
}
body.admin .btn-lg {
    padding: 20px 40px;
    font-size: 18px;
    line-height: 18px;
}
body.admin .btn-sm {
    padding: 8px 14px;
    font-size: 13px;
    line-height: 13px;
}