/*
  Step 4, colour rethink (18.10.2026): white and black grounds, Nuit as text and accent, Menthe as accent.
  Three variants, switched by data-pal on .page (switch.js):
    encre   = Nuit only as text and main button
    surface = Nuit also on a few surfaces (price tag, proof backplate, cards on black)
    nuit    = the hero on a Nuit ground, the next section on white
  Each ground sets the same custom properties; components only read them.
  Francis picked surface (18.10). The black values now live in design-system/tokens.css, and base.css has
  the Surface grounds (.on-white, .on-black); new sections use those, this file stays for the hero prototypes.
*/

/* White ground (and the next section when the hero is Nuit) */
.g-light, [data-pal="nuit"] .g-dark {
  --bg: var(--c-white); --fg: var(--c-nuit); --muted: var(--c-muted-p); --line: var(--c-line-p);
  --card: var(--c-paper); --acc: var(--c-nuit);
  --b1-bg: var(--c-nuit); --b1-fg: var(--c-white); --b1-hi: var(--c-nuit-hi);
  --b2: var(--c-nuit); --b2-hi: var(--c-paper); --focus: var(--c-nuit);
  --surf: var(--c-paper); --surf-fg: var(--c-nuit); --surf-acc: var(--c-nuit); --surf-muted: var(--c-muted-p);
  color-scheme: light;
}
[data-pal="surface"] .g-light {
  --surf: var(--c-nuit); --surf-fg: var(--c-white); --surf-acc: var(--c-menthe); --surf-muted: var(--c-muted-n);
}

/* Black ground */
.g-dark {
  --bg: var(--c-black); --fg: var(--c-white); --muted: var(--c-muted-k); --line: var(--c-line-k);
  --card: var(--c-tone-k); --acc: var(--c-menthe);
  --b1-bg: var(--c-menthe); --b1-fg: var(--c-nuit); --b1-hi: var(--c-menthe-hi);
  --b2: var(--c-white); --b2-hi: var(--c-tone-k); --focus: var(--c-menthe);
  --surf: var(--c-tone-k); --surf-fg: var(--c-white); --surf-acc: var(--c-menthe); --surf-muted: var(--c-muted-k);
  color-scheme: dark;
}
[data-pal="surface"] .g-dark {
  --card: var(--c-nuit); --surf: var(--c-nuit);
  --b1-bg: var(--c-nuit); --b1-fg: var(--c-white); --b1-hi: var(--c-nuit-hi);   /* main button stays Nuit on black (Francis, 18.10) */
}

/* Nuit ground (hero in the nuit variant) */
[data-pal="nuit"] .g-light {
  --bg: var(--c-nuit); --fg: var(--c-paper); --muted: var(--c-muted-n); --line: var(--c-line-n);
  --card: var(--c-tone-n); --acc: var(--c-menthe);
  --b1-bg: var(--c-menthe); --b1-fg: var(--c-nuit); --b1-hi: var(--c-menthe-hi);
  --b2: var(--c-paper); --b2-hi: var(--c-tone-n); --focus: var(--c-menthe);
  --surf: var(--c-tone-n); --surf-fg: var(--c-paper); --surf-acc: var(--c-menthe); --surf-muted: var(--c-muted-n);
  color-scheme: dark;
}

/* ---------- Components read the ground ---------- */
.ground { background: var(--bg); color: var(--fg); transition: background-color var(--dur-ui-2) var(--ease-ui), color var(--dur-ui-2) var(--ease-ui); }
.ground :focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.ground .kicker, .ground .muted { color: var(--muted); }
.ground .tag-f { color: var(--muted); }
.ground .card { background: var(--card); }
.ground .btn-1 { background: var(--b1-bg); color: var(--b1-fg); }
.ground .btn-1:hover { background: var(--b1-hi); }
.ground .btn-2 { background: transparent; color: var(--b2); border-color: var(--b2); }
.ground .btn-2:hover { background: var(--b2-hi); }
.ground .lnk { text-decoration-color: var(--acc); }
.ground .acc { color: var(--acc); }

.surf { background: var(--surf); color: var(--surf-fg); }
.surf .muted { color: var(--surf-muted); }
.surf .acc { color: var(--surf-acc); }

/* ---------- Shared page parts ---------- */
.wrap {
  max-width: var(--page-max); margin-inline: auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}

.nav-in { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 10px; }
.wm { color: inherit; text-decoration: none; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; border-radius: var(--r-2); }
.wm-name { font-family: var(--f-display); font-variation-settings: "wdth" 75, "wght" 850; font-size: 1.25rem; line-height: 1; white-space: nowrap; }
.wm .tag { font-size: .6875rem; padding: .14rem .45rem; }
.nav-cta { padding-inline: 1rem; white-space: nowrap; }
@media (min-width: 600px) {
  .wm { flex-direction: row; align-items: center; gap: 10px; }
  .wm-name { font-size: 1.5rem; }
  .nav-in { padding-block: 16px; }
}

/* Price tag: the hero's brand surface */
.price-tag { display: inline-flex; align-items: center; gap: .4em; padding: .4rem .75rem; border-radius: var(--r-2); font-size: .875rem; font-weight: 600; line-height: 1.25; }

/* Next section preview (relief opener), to judge the ground alternation */
.next { padding-block: var(--space-section); }
.next-in { display: grid; gap: var(--s-5); }
.next .card { max-width: 34rem; }
.next .card b { font-family: var(--f-display); font-variation-settings: var(--fv-sub); font-weight: normal; font-size: var(--t-h3); line-height: 1.1; }
.proto-note { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; }