/*
 * Perfect Price — shared theme ("Blue + sunshine", item 60).
 *
 * One file, four copies: server/public/theme.css, desktop-app/theme.css and
 * extension/theme.css must be byte-identical, and the colours must match
 * perfect-price-mobile-v3/src/theme.js. `node tools/check-theme.js` fails
 * the moment they drift. Change a value here, copy the file to the other two,
 * mirror it in theme.js, run the check.
 *
 * Colours are named by job, not by hue: write `var(--pp-ink)`, never #1b1d24.
 * Dark mode follows the device setting through the media block below — no
 * component needs its own dark rule.
 */

/* Same layer order Tailwind v4 declares, so on the pages that use Tailwind the
   components below sit above its reset and below its utility classes. */
@layer theme, base, components, utilities;

:root {
    --pp-bg: #f6f5f0;
    --pp-surface: #ffffff;
    --pp-surface-2: #f1efe7;
    --pp-line: #e6e2d6;
    --pp-ink: #1b1d24;
    --pp-muted: #676b76;
    --pp-accent: #2563eb;
    --pp-accent-ink: #ffffff;
    --pp-accent-soft: #e7eefd;
    --pp-brand: #f5cb38;
    --pp-brand-ink: #1b1d24;
    --pp-drop: #0f8a52;
    --pp-drop-soft: #e2f3ea;
    --pp-danger: #c93a33;
    --pp-danger-soft: #fbe7e5;
    --pp-deal: #fdf0c2;
    --pp-deal-ink: #6e5200;
    --pp-warn: #b45309;
    --pp-warn-soft: #fdf0dc;
    --pp-overlay: rgba(27, 29, 36, 0.45);

    --pp-shadow: 0 1px 2px rgba(40, 35, 20, 0.06), 0 4px 12px rgba(40, 35, 20, 0.05);
    --pp-shadow-lg: 0 24px 60px rgba(30, 25, 10, 0.2);
    --pp-radius: 12px;
    --pp-radius-sm: 9px;
    --pp-radius-lg: 18px;
    --pp-font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    :root {
        --pp-bg: #121318;
        --pp-surface: #1b1c23;
        --pp-surface-2: #24252e;
        --pp-line: #2e303b;
        --pp-ink: #f1efe8;
        --pp-muted: #a6a6b0;
        --pp-accent: #6b96ff;
        --pp-accent-ink: #0b1020;
        --pp-accent-soft: #1f2a47;
        --pp-brand: #f5cb38;
        --pp-brand-ink: #1b1d24;
        --pp-drop: #45cf8c;
        --pp-drop-soft: #17322a;
        --pp-danger: #ff7b70;
        --pp-danger-soft: #3a1f1e;
        --pp-deal: #3b3112;
        --pp-deal-ink: #f5cb38;
        --pp-warn: #f0a54a;
        --pp-warn-soft: #3a2a14;
        --pp-overlay: rgba(0, 0, 0, 0.6);

        --pp-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
        --pp-shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.55);
        color-scheme: dark;
    }
}

@layer base {
    body {
        font-family: var(--pp-font);
        background: var(--pp-bg);
        color: var(--pp-ink);
        -webkit-font-smoothing: antialiased;
    }
}

@layer components {
    /* Buttons: pill-shaped everywhere. One primary per screen area. */
    .pp-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        padding: 0.625rem 1.125rem;
        border-radius: 999px;
        border: 1px solid transparent;
        font: inherit;
        font-size: 0.875rem;
        font-weight: 700;
        line-height: 1.25;
        white-space: nowrap;
        cursor: pointer;
        text-decoration: none;
        transition: background-color 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
    }
    .pp-btn:focus-visible,
    .pp-chip:focus-visible,
    .pp-nav-item:focus-visible,
    .pp-seg > button:focus-visible {
        outline: 2px solid var(--pp-accent);
        outline-offset: 2px;
    }
    .pp-btn:disabled { opacity: 0.55; cursor: not-allowed; }
    .pp-btn-primary { background: var(--pp-accent); color: var(--pp-accent-ink); }
    .pp-btn-primary:hover:not(:disabled) { background: color-mix(in srgb, var(--pp-accent) 86%, var(--pp-ink)); }
    .pp-btn-secondary { background: var(--pp-surface); color: var(--pp-ink); border-color: var(--pp-line); }
    .pp-btn-secondary:hover:not(:disabled) { background: var(--pp-surface-2); }
    .pp-btn-ghost { background: transparent; color: var(--pp-muted); }
    .pp-btn-ghost:hover:not(:disabled) { background: var(--pp-surface-2); color: var(--pp-ink); }
    .pp-btn-danger { background: var(--pp-danger-soft); color: var(--pp-danger); }
    .pp-btn-danger:hover:not(:disabled) { background: var(--pp-danger); color: var(--pp-surface); }
    .pp-btn-sm { padding: 0.4rem 0.85rem; font-size: 0.75rem; }
    .pp-btn-block { width: 100%; }
    .pp-btn-icon { padding: 0.55rem; }
    .pp-btn-icon.pp-btn-sm { padding: 0.4rem; }
    .pp-btn-icon.is-danger:hover:not(:disabled) { background: var(--pp-danger-soft); color: var(--pp-danger); border-color: transparent; }

    /* Surfaces */
    .pp-card {
        background: var(--pp-surface);
        border: 1px solid var(--pp-line);
        border-radius: var(--pp-radius);
        box-shadow: var(--pp-shadow);
    }
    .pp-brand-band { background: var(--pp-brand); color: var(--pp-brand-ink); }

    /* Form fields */
    .pp-input {
        width: 100%;
        padding: 0.625rem 0.875rem;
        background: var(--pp-surface);
        color: var(--pp-ink);
        border: 1px solid var(--pp-line);
        border-radius: var(--pp-radius-sm);
        font: inherit;
        font-size: 0.875rem;
        line-height: 1.4;
        transition: border-color 0.15s, box-shadow 0.15s;
    }
    .pp-input::placeholder { color: var(--pp-muted); opacity: 0.75; }
    .pp-input:focus { outline: none; border-color: var(--pp-accent); box-shadow: 0 0 0 3px var(--pp-accent-soft); }
    .pp-input:disabled { background: var(--pp-surface-2); color: var(--pp-muted); cursor: not-allowed; }
    .pp-label { display: block; font-size: 0.8125rem; font-weight: 700; color: var(--pp-ink); margin-bottom: 0.375rem; }
    .pp-hint { font-size: 0.75rem; color: var(--pp-muted); }
    .pp-check { width: 1rem; height: 1rem; accent-color: var(--pp-accent); flex-shrink: 0; }
    .pp-option {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.75rem;
        background: var(--pp-surface);
        border: 1px solid var(--pp-line);
        border-radius: var(--pp-radius-sm);
        cursor: pointer;
        font-size: 0.875rem;
        font-weight: 600;
        transition: background-color 0.15s;
    }
    .pp-option:hover { background: var(--pp-surface-2); }

    /* Chips filter a list; the selected one is solid. */
    .pp-chip {
        display: inline-flex;
        align-items: center;
        gap: 0.375rem;
        padding: 0.375rem 0.875rem;
        border-radius: 999px;
        border: 1px solid var(--pp-line);
        background: var(--pp-surface);
        color: var(--pp-muted);
        font: inherit;
        font-size: 0.75rem;
        font-weight: 700;
        cursor: pointer;
        transition: background-color 0.15s, color 0.15s, border-color 0.15s;
    }
    .pp-chip:hover { color: var(--pp-ink); border-color: color-mix(in srgb, var(--pp-accent) 45%, var(--pp-line)); }
    .pp-chip.is-on { background: var(--pp-ink); border-color: var(--pp-ink); color: var(--pp-bg); }
    .pp-chip-add { border-style: dashed; }

    /* Badges label a thing; they are not buttons. */
    .pp-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
        padding: 0.125rem 0.5rem;
        border-radius: 999px;
        font-size: 0.6875rem;
        font-weight: 700;
        line-height: 1.45;
        white-space: nowrap;
        background: var(--pp-surface-2);
        color: var(--pp-muted);
    }
    .pp-badge-accent { background: var(--pp-accent-soft); color: var(--pp-accent); }
    .pp-badge-drop { background: var(--pp-drop-soft); color: var(--pp-drop); }
    .pp-badge-danger { background: var(--pp-danger-soft); color: var(--pp-danger); }
    .pp-badge-deal { background: var(--pp-deal); color: var(--pp-deal-ink); }
    .pp-badge-warn { background: var(--pp-warn-soft); color: var(--pp-warn); }
    .pp-badge-solid { background: var(--pp-surface); color: var(--pp-ink); box-shadow: var(--pp-shadow); }

    /* Segmented control (chart ranges) */
    .pp-seg { display: inline-flex; gap: 2px; padding: 3px; background: var(--pp-surface-2); border-radius: var(--pp-radius-sm); }
    .pp-seg > button {
        border: 0;
        background: transparent;
        color: var(--pp-muted);
        font: inherit;
        font-size: 0.6875rem;
        font-weight: 700;
        padding: 0.25rem 0.7rem;
        border-radius: calc(var(--pp-radius-sm) - 3px);
        cursor: pointer;
    }
    .pp-seg > button.is-on { background: var(--pp-surface); color: var(--pp-ink); box-shadow: var(--pp-shadow); }

    /* Sidebar navigation */
    .pp-nav-item {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        width: 100%;
        padding: 0.65rem 0.875rem;
        border: 0;
        border-radius: var(--pp-radius-sm);
        background: transparent;
        color: var(--pp-muted);
        font: inherit;
        font-size: 0.875rem;
        font-weight: 600;
        text-align: left;
        cursor: pointer;
        transition: background-color 0.15s, color 0.15s;
    }
    .pp-nav-item:hover { background: var(--pp-surface-2); color: var(--pp-ink); }
    .pp-nav-item.active { background: var(--pp-accent); color: var(--pp-accent-ink); }

    /* Notices inside a page or a form */
    .pp-note { display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.75rem 0.875rem; border-radius: var(--pp-radius-sm); font-size: 0.8125rem; background: var(--pp-surface-2); color: var(--pp-ink); }
    .pp-note-warn { background: var(--pp-warn-soft); color: var(--pp-warn); }
    .pp-note-danger { background: var(--pp-danger-soft); color: var(--pp-danger); }
    .pp-note-drop { background: var(--pp-drop-soft); color: var(--pp-drop); }

    /* Small text */
    .pp-eyebrow { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--pp-muted); }
    .pp-price { font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
}

@media (prefers-reduced-motion: reduce) {
    .pp-btn, .pp-chip, .pp-input, .pp-option, .pp-nav-item { transition: none; }
}