/* One palette for the whole product.
 *
 * The app shell has three themes (magazine/otter/pebble), the CMS pages use a
 * fourth look via Bootstrap, and "/" uses discovery-v3.css. A visitor who
 * signs in therefore saw a different colour scheme on the login screen than on
 * the page they came from, which reads as a different site -- bad anywhere,
 * worse next to a checkout.
 *
 * This file remaps the 34 custom properties the three themes share onto the
 * palette from "/". Loaded AFTER a theme, it overrides that theme's :root
 * while leaving its structure (layout, spacing, component shapes) intact. One
 * file to change the product's colours; no 6,400-line rewrite.
 *
 * Not a complete unification. Each theme still hardcodes 35-87 colour literals
 * outside :root -- mostly neutrals (#FAFAFA) and semantic badge colours -- so
 * the remaining differences are those. See README-styling.md for the plan to
 * collapse the three structures into one.
 */

:root {
    /* --- Neutrals -------------------------------------------------------
       Mapped by ROLE, not by name. --river-deep is used 31x as text and 16x
       as a button background, so it has to stay a near-black: pointing it at
       the v3 blue would turn body copy blue. The blue arrives via the
       component bridge at the bottom instead. */
    --river-deep: #191b24;   /* v3 --on-surface          : headlines, body */
    --river-mid: #424655;    /* v3 --on-surface-variant  : secondary text */
    --river-light: #f2f3ff;  /* v3 --surface-container-low */

    --pebble-stone: #faf8ff;   /* v3 --surface            : app background */
    --pebble-surface: #ffffff; /* v3 --surface-container-lowest : cards */
    --pebble-shadow: #e1e2ee;  /* v3 --surface-variant    : borders */
    --pebble-border: #c2c6d8;  /* v3 --outline-variant */

    /* Accent pair. --otter-fur is the "active/primary accent" token. */
    --otter-fur: #0057cd;    /* v3 --primary */
    --otter-belly: #ffbf00;  /* v3 --sun-yellow */

    /* --- Semantic signals ------------------------------------------------
       Kept semantic (green = good, red = stop) but pulled onto the v3 hues so
       they sit beside the primary and accent without clashing. */
    --accent-safe: #2ec4b6;     /* v3 --soft-teal */
    --accent-info: #0057cd;     /* v3 --primary */
    --accent-warning: #ffbf00;  /* v3 --sun-yellow */
    --accent-alert: #ba1a1a;    /* v3 --error */
    --accent-heart: #ff7a59;    /* v3 --action-orange */
    --accent-rain: #0d6efd;     /* v3 --primary-container */
    --accent-sun: #ffbf00;      /* also drives --mm-ticket in ticketing.css */

    /* --- Map pin categories --------------------------------------------- */
    --category-play: #ffbf00;
    --category-eat: #ff7a59;
    --category-urgent: #2ec4b6;
    --category-learn: #0057cd;
    --category-explore: #2e9e5b;
    --category-shopping: #8b6bb1;
    --category-default: #424655;

    /* --- Shape -----------------------------------------------------------
       v3 is markedly less round than pebble (which goes up to 32px). Radius
       carries as much of a design's character as colour, so it moves too. */
    --radius-pebble: 1rem;
    --radius-lg: 1rem;
    --radius-inner: 0.75rem;
    --radius-md: 0.75rem;
    --radius-input: 0.5rem;
    --radius-sm: 0.25rem;
    --radius-pill: 9999px;

    /* --- Type ------------------------------------------------------------
       Plus Jakarta Sans is already self-hosted in fonts.css. */
    --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;

    --glass: rgba(255, 255, 255, 0.85);
}

/* --- Component bridge ----------------------------------------------------
   The few places where "same colour" is not enough because the theme paints a
   primary action from a neutral token. On "/" the primary action is blue and
   ticketing is orange; these selectors carry that across without touching the
   theme files. */
.btn-primary,
.btn-onboarding-primary {
    background: #0057cd;
    color: #fff;
    box-shadow: 0 4px 12px rgba(0, 87, 205, 0.25);
}

.btn-primary:hover,
.btn-onboarding-primary:hover {
    background: #0d6efd;
}

/* Active navigation and filters follow the primary too. */
.nav-item.active,
.filter-pill.active {
    background: #0057cd;
    border-color: #0057cd;
    color: #fff;
}

/* ------------------------------------------------------------------ layout */
/* Shared width for the v2 app shell.

   It was a fixed 480px -- a phone frame centred in the viewport, which looked
   deliberate when every screen was that shell, and looked broken once "/"
   became a full-width v3 page. Going to Saved or Tickets from "/" collapsed
   the page to a narrow column.

   960px rather than v3's 1200px --container-max: these are lists and forms
   (settings rows, ticket passes, collections), and a 1200px settings row is
   worse than a 960px one. The bookmark grid is the widest thing here and it
   has ample room. Mobile is unaffected: .app-shell is width:100%, so this cap
   only engages once the viewport is wider than it.

   v3 keeps its own --container-max; this is deliberately a separate token
   because the two shells hold different kinds of content. */
:root {
    --app-shell-max: 960px;

    /* Auth pages (login, logout, password reset) deliberately do NOT use
       --app-shell-max. They are single-column forms, and a 960px-wide login
       field is harder to use, not more consistent -- the eye loses the line
       between label and input. Kept as its own token so the two can move
       independently, and so this decision is visible rather than implied by a
       number sitting in a theme file. */
    --auth-shell-max: 520px;
}