/* PROMOREALTOR brand tokens — the single source for every marketing page.
 *
 * Values come straight from DESIGN.md. Before this file each page carried its own
 * :root with its own near-miss palette (three different greys called --muted, an
 * affiliate page in gold on near-black), so "the brand colour" was whatever the
 * page you happened to open said it was.
 *
 * Two groups below:
 *   1. the canonical DESIGN.md tokens, defined light and re-defined for dark;
 *   2. the legacy names the pages already reference (--line, --text, --soft, --gold…),
 *      aliased onto the canonical ones as var() references so a page keeps working
 *      untouched AND follows the theme — an alias holding a literal colour would
 *      silently stay light when the dark block swaps its target.
 *
 * Rule that matters when editing: never add a colour here in one theme only.
 */
:root {
  /* accent — intent, and only intent */
  --signal-violet:        #6d28d9;
  --signal-violet-press:  #5b21b6;
  --signal-violet-soft:   #f1ebfc;
  --signal-violet-light:  #8b5cf6;

  /* neutrals */
  --paper:                #f6f6fb;
  --surface-base:         #ffffff;
  --surface-sunken-base:  #eeeef5;
  --hairline:             #e5e4ef;
  --ink-base:             #18161f;
  --ink-muted-base:       #6b6a7d;
  --bar:                  #f6f6fbe6;

  /* status */
  --ok:                   #047857;
  --warn:                 #8a5a00;
  --danger:               #c0392f;

  /* shape — four radii, no fifth */
  --r-chrome:  4px;
  --r-control: 8px;
  --r-object:  10px;
  --r-room:    12px;
  --r-pill:    999px;

  /* elevation — flat at rest; depth is violet-black, never neutral */
  --shadow-seam:      0 1px 2px #0000000a;
  --shadow-proximity: 0 14px 30px -12px rgba(76,29,149,.28);

  /* ---- legacy aliases: what the pages already call these ---- */
  --accent:      var(--signal-violet);
  --accent-dark: var(--signal-violet-press);
  --accent-lt:   var(--signal-violet-light);
  --accentSoft:  var(--signal-violet-soft);
  --accentPress: var(--signal-violet-press);
  --bg:          var(--paper);
  --bg2:         var(--surface-base);
  --bg3:         var(--surface-sunken-base);
  --surface:     var(--surface-base);
  --surface2:    var(--surface-sunken-base);
  --soft:        var(--surface-base);
  --dark:        var(--signal-violet-soft);
  --border:      var(--hairline);
  --line:        var(--hairline);
  --ink:         var(--ink-base);
  --text:        var(--ink-base);
  --white:       var(--ink-base);
  --muted:       var(--ink-muted-base);
  /* the affiliate page's gold identity folds into the one accent */
  --gold:        var(--signal-violet);
  --gold-lt:     var(--signal-violet-light);
  --radius:      var(--r-room);
  --sh-1:        var(--shadow-seam);
  --sh-2:        var(--shadow-proximity);
  --sp:          8px;

  /* Accent split by ROLE, because one violet cannot do both jobs in dark.
   * Measured on the real pages: DESIGN.md's dark accent #8b5cf6 gives 4.29:1 as small
   * text on --surface and 4.23:1 as a fill under white text — both under AA 4.5.
   * So: -text is the value that must stay legible ON a dark ground (it lightens in
   * dark), -fill is the value that must keep WHITE legible on top of it (it stays the
   * deep violet in both themes). --accent itself is unchanged and still marks intent.
   */
  --accent-text:   #6d28d9;
  --accent-fill:   #6d28d9;
  --accent-fill-2: #7c3aed;   /* 5.6:1 under white; #8b5cf6 measured 4.23 and failed AA */

  /* Surfaces that do not follow the theme: the hero photograph, a video well, and a
   * filled violet block are dark whatever the OS says, so text on them needs fixed
   * values rather than theme-swapping ones. These are the dark-theme neutrals from
   * DESIGN.md, pinned. Using --ink-muted here instead would go black-on-photo in light.
   */
  --ink-on-dark:       #f3f1fa;
  --ink-muted-on-dark: #9c97ad;
  --ground-dark:       #0e0c15;
  --well-dark:         #201c2c;
  --ink-on-accent:     #f1ebfc;
  /* a label sitting ON a photograph needs a scrim, not a surface: dark in both themes */
  --scrim-on-image:    #0009;
}

@media (prefers-color-scheme: dark) {
  :root {
    --signal-violet:       #8b5cf6;
    --signal-violet-press: #a78bfa;
    --signal-violet-soft:  rgba(139,92,246,.16);
    --signal-violet-light: #a78bfa;

    --paper:               #0e0c15;
    --surface-base:        #171420;
    --surface-sunken-base: #201c2c;
    --hairline:            rgba(255,255,255,.10);
    --ink-base:            #f3f1fa;
    --ink-muted-base:      #9c97ad;
    --bar:                 #0e0c15e6;

    --ok:                  #5fc9a3;
    --warn:                #e0b155;
    --danger:              #f08a83;

    --accent-text:   #a78bfa;   /* 6.9:1 on surface, 5.6:1 on accent-soft */
    --accent-fill:   #6d28d9;   /* 7.1:1 under white */
    --accent-fill-2: #7c3aed;   /* 5.6:1 under white — the gradient's far stop */
  }
}

/* ---- explicit theme, for pages that follow the app's own toggle ----
 * The app (index.html) has a light/dark switch of its own and remembers it in
 * localStorage 'pag_theme'. A page that should match it rather than the OS — the CRM —
 * sets <html data-theme="light|dark">. `:root[data-theme]` outranks the plain `:root`
 * in the media query above, so the attribute wins either way. Same values as the two
 * blocks above; keep all three in step.
 */
:root[data-theme="light"] {
  color-scheme: light;
  --signal-violet: #6d28d9; --signal-violet-press: #5b21b6; --signal-violet-soft: #f1ebfc; --signal-violet-light: #8b5cf6;
  --paper: #f6f6fb; --surface-base: #ffffff; --surface-sunken-base: #eeeef5; --hairline: #e5e4ef;
  --ink-base: #18161f; --ink-muted-base: #6b6a7d; --bar: #f6f6fbe6;
  --ok: #047857; --warn: #8a5a00; --danger: #c0392f;
  --accent-text: #6d28d9; --accent-fill: #6d28d9; --accent-fill-2: #7c3aed;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --signal-violet: #8b5cf6; --signal-violet-press: #a78bfa; --signal-violet-soft: rgba(139,92,246,.16); --signal-violet-light: #a78bfa;
  --paper: #0e0c15; --surface-base: #171420; --surface-sunken-base: #201c2c; --hairline: rgba(255,255,255,.10);
  --ink-base: #f3f1fa; --ink-muted-base: #9c97ad; --bar: #0e0c15e6;
  --ok: #5fc9a3; --warn: #e0b155; --danger: #f08a83;
  --accent-text: #a78bfa; --accent-fill: #6d28d9; --accent-fill-2: #7c3aed;
}

/* The logo file is the owner's white mark (2026-09-28). Pages paint it violet with a filter on
 * .mark; on a dark page that violet sank into the header, so there it stays white. */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .mark { filter: none !important; } }
:root[data-theme="dark"] .mark { filter: none !important; }

/* ---- shared marketing baseline ----
 * Type comes from the DESIGN.md ramp. Headings clamp DOWN for small screens but
 * never above their ramp step, so the scale holds at every width without a
 * second breakpoint.
 */
body {
  font-family: 'Archivo', system-ui, sans-serif;
  background: var(--paper);
  color: var(--ink-base);
  line-height: 1.5;
  letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased;
}
/* countable things must not twitch as they change */
.price, .amount, .stat b, .stat-num, .offer-line span:last-child, .data-card .num {
  font-variant-numeric: tabular-nums;
}