/* Brand palette — five colors only. All UI tokens derive from these. */

:root {
    /* Core palette */
    --color-cyan: #55dde0;
    --color-cyan-dark: #3ec9cc;
    --color-blue: #33658a;
    --color-blue-dark: #284a63;
    --color-body: #2f4858;
    --color-yellow: #f6ae2d;
    --color-yellow-dark: #d99625;
    --color-orange: #f26419;
    --color-orange-dark: #d95614;

    /* Body text shades */
    --color-body-soft: rgba(47, 72, 88, 0.72);
    --color-body-muted: rgba(47, 72, 88, 0.48);

    /* Surfaces */
    --paper: #ffffff;
    --paper-raised: #ffffff;
    --color-topbar: var(--color-blue);
    --color-header: var(--color-blue);

    /* Text on dark / on colored buttons */
    --ink: var(--color-body);
    --ink-soft: var(--color-body-soft);
    --ink-muted: var(--color-body-muted);
    --on-dark: #ffffff;
    --on-accent: var(--color-body);

    /* Dividers & rules */
    --divider: var(--color-blue);
    --rule: rgba(51, 101, 138, 0.18);
    --rule-strong: rgba(51, 101, 138, 0.32);

    /* Semantic: links, borders, idle circle outline */
    --accent-blue: var(--color-blue);
    --accent-blue-dark: var(--color-blue-dark);

    /* Listing labels (Phone, Category, BUYS OUTRIGHT, etc.) */
    --label-listing: var(--color-yellow);

    /* Category drawer active item, form accent labels */
    --label-category: var(--color-orange);

    /* Tag chips */
    --tag-bg: rgba(85, 221, 224, 0.22);
    --tag-border: rgba(85, 221, 224, 0.45);
    /* Best fit tags: the site's yellow-orange. Personal tags: the orange. */
    --tag-best-fit-bg: rgba(246, 174, 45, 0.24);
    --tag-best-fit-border: var(--color-yellow);
    --tag-user-bg: rgba(242, 100, 25, 0.14);
    --tag-user-border: var(--color-orange);
    /* Instruction / hint text on listings ("Saved instantly…", etc.). */
    --text-hint: #a3a9ae;
    /* Light gray dividers (list page). */
    --divider-light: #dde1e4;
    /* "Saved" pill shown when a change reaches the server. */
    --color-saved: #2e9e5b;
    --color-saved-error: var(--color-orange);

    /* Header action buttons */
    --color-header-btn: var(--color-yellow);
    --color-header-btn-dark: var(--color-yellow-dark);

    /* Add-to-list / admin status circles */
    --color-status-verified: var(--color-cyan);
    --color-status-verified-dark: var(--color-cyan-dark);
    --color-status-phone: #3aab6a;
    --color-status-phone-dark: #2e8f58;
    --color-status-community: #56e39f;
    --color-status-community-dark: #45c887;
    /* "Attempted verification" on listing cards (owner, 2026-10-06). */
    --color-status-attempted: #7b5ea7;
    /* Locked sections: the grey "get your free 🔑" pill. */
    --color-key-pill: #e7eaed;
    --color-key-pill-ink: #4f5b66;

    /* Open listing divider, active filter pills, action buttons */
    --color-list-active: var(--color-yellow);
    --color-filter-active: var(--color-cyan);
    --color-filter-active-dark: var(--color-cyan-dark);
    --color-btn-primary: var(--color-cyan);
    --color-btn-primary-dark: var(--color-cyan-dark);

    /* Tinted surfaces (hover, chips, highlights) */
    --accent-pale: rgba(51, 101, 138, 0.1);
    --accent-on-dark: var(--color-cyan);
    --surface-hover: rgba(51, 101, 138, 0.08);
    --overlay-scrim: rgba(47, 72, 88, 0.45);
    --overlay-scrim-light: rgba(47, 72, 88, 0.4);

    /* Alerts */
    --alert-bg: rgba(242, 100, 25, 0.1);
    --alert-border: var(--color-orange);
    --alert-text: var(--color-body);
    --alert-hover: rgba(242, 100, 25, 0.18);

    /* Focus & errors */
    --focus: var(--color-blue);
    --error: #a12828;
    --error-bg: rgba(161, 40, 40, 0.08);

    /* Typography */
    --font-sans: "Inter", system-ui, -apple-system, sans-serif;
    --font-label: "Work Sans", "Inter", system-ui, -apple-system, sans-serif;
    --label-size: 0.62rem;
    --label-weight: 700;
    --label-tracking: 0.1em;
    --value-size: 0.9rem;

    /*
     * Back-compat aliases — map old token names to the new palette so
     * existing CSS keeps working while we migrate file by file.
     */
    --rust: var(--accent-blue);
    --rust-dark: var(--accent-blue-dark);
    --color-dark: var(--color-header);
    --label-static: var(--color-blue);
}