/* ============================================================================
   tokens.css — Single source of truth for ShowDogCentral design tokens.

   Do NOT hardcode brand hex / font / radius elsewhere — reference these.
   Every layout loads this file FIRST, before any component CSS, so that
   `var(--brand)` etc. resolve to one canonical value app-wide.

   Family-scoped aliases (--er-brand, --jp-brand, --sp-brand, --hd-brand,
   --pd-brand, --dir-brand, --ps-brand, --nav-brand, --cp-brand …) are
   repointed to VALUE var(--brand)/var(--brand-vivid)/etc. in their own
   files — do not rewrite their downstream usages here.
   Introduced by the frontend-consistency pass (Phase 0).
   ========================================================================= */
:root {
    /* ── Brand + accent ─────────────────────────────────────────────── */
    --brand: #511c66;          /* canonical royal purple (buttons, accents) */
    --brand-vivid: #511c66;    /* unified to canonical plum — was #6500F8 indigo (removed app-wide, no indigo anywhere) */
    --brand-dark: #6a2485;     /* darker press/gradient shade */
    --brand-soft: #f3edf7;     /* soft lavender for pill/chip/hover backgrounds */
    --gold: #fcc200;           /* stars, "Interested", hero accent */

    /* ── Text ───────────────────────────────────────────────────────── */
    --ink: #1a1a2e;            /* body / near-black text */
    --ink-muted: #4b5563;      /* real secondary/muted gray (AA on white) */
    --ink-subtle: #64748b;     /* lighter caption gray (>=4.5:1 on white) */

    /* ── Status ─────────────────────────────────────────────────────── */
    --danger: #b91c1c;
    --success: #047857;
    --warn: #b45309;

    /* ── Surface + line ─────────────────────────────────────────────── */
    --line: #e2e8f0;           /* hairline / border */
    --surface: #ffffff;        /* card / base surface */

    /* ── Radius scale ───────────────────────────────────────────────── */
    --radius-sm: 8px;          /* inputs, small controls, kebab menus */
    --radius-md: 12px;         /* cards, panels */
    --radius-lg: 16px;         /* large hero/error cards */
    --radius-pill: 999px;      /* all pills/badges */
    --radius-btn: 60px;        /* primary CTA buttons */

    /* ── Elevation ──────────────────────────────────────────────────── */
    --shadow-sm: 0 1px 3px rgba(26,26,46,.06);
    --shadow-md: 0 4px 20px rgba(26,26,46,.06);

    /* ── Typography ─────────────────────────────────────────────────── */
    --font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* Heading scale (primary page-heading role) */
    --h1-size: 28px;  --h1-weight: 800;
    --h2-size: 22px;  --h2-weight: 700;
    --h3-size: 18px;  --h3-weight: 700;
}

/* Shared pill primitive. Semantic colors describe meaning, never a page. */
.pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: var(--radius-pill);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
}
.pill--brand { background: var(--brand-soft); color: var(--brand); }
.pill--success { background: #d1fae5; color: var(--success); }
.pill--warn { background: #fef3c7; color: var(--warn); }
.pill--danger { background: #fee2e2; color: var(--danger); }
.pill--info { background: #dbeafe; color: #1e40af; }
.pill--gold { background: #fef9c3; color: #854d0e; }

/* Shared native-<select> primitive (dropdown audit follow-up). Replaces the
   per-page copies of the brand-select recipe for NEW call sites; existing
   fully-themed selects (.saved-sort-select, .dir-sort-select, subs/feedback/
   contact admin bars) migrate opportunistically. Themes the CLOSED control;
   the open menu is OS-rendered except where the @supports block below applies.
   Chevron hardcodes the brand hex — data URIs can't reference var(--brand). */
.sdc-select {
    appearance: none;
    -webkit-appearance: none;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    background-color: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    min-height: 44px; /* tap-target floor */
    padding: 8px 38px 8px 14px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16'%3E%3Cpath fill='%23511c66' d='M3.2 5.5 8 10.3l4.8-4.8H3.2z'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 13px center;
    background-size: 12px;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.sdc-select:hover { border-color: var(--brand); }
.sdc-select:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(81, 28, 102, .12);
}
/* Compound selector on purpose: outranks layout rules like
   `.filter-bar select` (admin.css) that would otherwise win on specificity. */
.sdc-select.sdc-select--sm {
    min-height: 38px; /* dense admin filter bars — matches .subs-redesign */
    font-size: 13px;
    padding: 6px 32px 6px 11px;
    background-position: right 10px center;
}
.sdc-select.sdc-select--wide { width: 100%; }

/* Open-menu add-on: Chromium 135+ customizable <select>. Safari/Firefox
   ignore the whole block and keep the OS popup; iOS keeps its wheel. */
@supports selector(::picker(select)) {
    .sdc-select, .sdc-select::picker(select) { appearance: base-select; }
    .sdc-select::picker-icon { display: none; } /* chevron comes from the bg image */
    .sdc-select::picker(select) {
        border: 1px solid var(--line);
        border-radius: 10px;
        background: var(--surface);
        padding: 6px;
        margin-top: 6px;
        box-shadow: 0 8px 24px rgba(26, 26, 46, .16);
        /* Always open BELOW the control. Without this the picker's default
           anchor fallbacks flip it upward near the viewport bottom, covering
           the control's own card (looks broken to users). When space below
           is short the picker scrolls instead of flipping. */
        position-area: block-end span-inline-end;
        position-try-fallbacks: none;
    }
    .sdc-select option {
        font-family: var(--font-sans);
        font-size: 14px;
        font-weight: 600;
        color: var(--ink);
        padding: 9px 12px;
        border-radius: 7px;
        min-height: 40px;
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .sdc-select option:hover,
    .sdc-select option:focus { background: var(--brand-soft); color: var(--brand); }
    .sdc-select option:checked { color: var(--brand); }
    .sdc-select option::checkmark { color: var(--brand); font-weight: 800; }
}