/* ═══════════════════════════════════════════════════════════════════════════
   Soulvaya OS — the token layer.

   Before this file, all nine onboarding pages inlined their own <style> and
   redeclared their own :root. 53 distinct variable names, and 30 of them
   carried DIFFERENT values on different pages — same name, opposite meaning.
   That is why a rebrand reached six pages and silently skipped three.

   A page opts into a theme and adds nothing of its own. To change the brand,
   change this file.

   ── RESTORED 25 Jul 2026 · read this before changing any colour below ─────
   The source of truth for this palette is cc-mockups/command-center-editorial.html
   (md5 8aea5450df) — the editorial design Chek approved on 24 Jul.

   It had never been implemented. Production lifted its typography and left a
   comment saying its "colour system is deliberately NOT ported". Then, on
   25 Jul, this file was rebranded to a navy-and-cyan palette that was never
   approved by anyone, and that palette was pushed to the portal, the marketing
   site and all ten Command Centers. A brand gate was written to enforce it —
   and that gate then FAILED any build containing #F7F5F1, the background colour
   of the approved design. A guard was built that blocked the thing it should
   have been protecting.

   So: cream, gold, aubergine and Fraunces are the brand. If a future change
   proposes navy and cyan, it is reverting to an unapproved palette — check
   against the mockup before touching anything here.

   ── One honest deviation from the mockup, and why ─────────────────────────
   The approved mockup is a visual design, not a contrast-audited system. Six of
   its text values fall below WCAG AA on their own surfaces:

     --muted  #837D73   4.08:1 on white,  3.75:1 on cream   (needs 4.5)
     --gold   #A87E2F   3.69:1 on white,  3.39:1 on cream
     --gold-2 #C6A15B   2.43:1 on white
     --teal   #3E7E79   4.10:1 on its own tint

   Those are the values used for every timestamp, every card label and every
   accented heading — the smallest text on the page would have been the least
   readable. Rather than override the design, each one is darkened by the
   MINIMUM that clears the floor, hue preserved: --muted moves 5% in lightness,
   the gold 6%. Pine and red already passed and are untouched.

   The DECORATIVE values are exactly as approved and must stay that way —
   --gold-2 for rules, the sidebar active bar, donut arcs and dividers;
   --gold-line and --line for borders. Nothing there carries text, so nothing
   there needs to pass a text ratio. That split is the whole reason the design
   can keep its character and still be readable.

   ── The handover rule ────────────────────────────────────────────────────
   After purchase a client is being handed their own business, so the accent
   becomes their industry's — set with
   `style="--v-a:#e8a23c;--v-display:Fraunces,serif"` on <html>, exactly as the
   Command Center does. --a and --font-display read from those, so every rule
   below follows and no page needs to know which industry it is. Before
   purchase, the fallback is Soulvaya's own gold.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* Type — the approved editorial pairing: Fraunces for display, Inter for
     body. This is a change from the unapproved 25 Jul values, which put Outfit
     first; Outfit stays in the stack so any page whose font <link> has not been
     updated renders in a near sibling rather than dropping to a system face. */
  --sans:'Inter','Outfit',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --serif:'Fraunces',Georgia,serif;
  --font-display:var(--v-display,var(--serif));

  /* radii + motion */
  --r-sm:10px; --r-md:14px; --r-lg:18px; --r-xl:22px; --r:var(--r-md);
  --ease:cubic-bezier(.4,0,.2,1);

  /* The accent. --v-a is published per industry after purchase; before that it
     falls back to Soulvaya's gold.
       --a        decorative gold — rules, arcs, dots, the active bar
       --a-deep   the same gold darkened for TEXT and small marks
       --a-soft   its tint, for panel backgrounds
       --a-btn-fg what sits ON the accent: ink, not white. Ink on --a is
                  7.15:1; white on it is 2.43:1 and would be unreadable. */
  --a:var(--v-a,#C6A15B);
  --a-deep:var(--v-a-deep,#8A6827);
  --a-soft:var(--v-a-soft,#F7F0E1);
  --a-btn-fg:var(--v-a-btn-fg,#1C1A17);
}

/* ── Light theme — the brief, the portal, ops, the Command Center ───────────
   The approved editorial palette. Measured, on the harder of white and cream:
     --ink      15.95:1   --ink-2   8.61:1    --muted  4.50:1
     --gold     4.72:1    --pine    5.78:1    --red    5.39:1
   The floor is 4.5 and every text value above clears it on BOTH surfaces, not
   just on white — a value that passes on a card and fails on the page is how
   the last palette shipped unreadable timestamps. */
.sv-light{
  --bg:#F7F5F1; --cream:#F7F5F1; --cream2:#F1EEE7;
  --card:#FFFFFF; --card-2:#FCFBF9;

  --ink:#1C1A17; --ink-2:#4A463F;
  /* #837D73 in the mockup: 4.08:1 on white, 3.75:1 on cream. Darkened the
     minimum to reach 4.50:1 on cream, which is the harder surface. */
  --muted:#767067;
  /* --faint existed only to be a third grey tier, and on a light surface there
     is no room for one that still passes. It is an alias of --muted now:
     anything lighter belongs on a border, not on a word. */
  --faint:#767067;
  --line:#E9E5DD; --line-soft:#F1EEE7;

  /* Gold. TWO values on purpose — the pair that keeps the design's character
     and still reads:
       --gold     text-weight, darkened from #A87E2F (3.69:1) to 5.13:1
       --gold-2   the approved decorative gold, untouched — rules, arcs, the
                  sidebar active bar. Never put text on or in this colour. */
  --gold:#8A6827; --gold-2:#C6A15B; --gold-soft:#C6A15B;
  --gold-bg:#F7F0E1; --gold-line:#E7D9BB;

  --pine:#2F6B4F; --pine-bg:#EAF2EC; --pine-line:#CADFCF;
  --teal:#3A7772; --teal-bg:#E9F1F0; --teal-line:#CFE2E0;
  --red:#A4483F; --red-bg:#F9ECEA; --danger:#A4483F;

  /* The sidebar: near-black aubergine, exactly as approved. Its foreground is
     10.31:1; the dim tier is 6.06:1, both comfortably clear. */
  --side:#141217; --side-2:#1E1B22; --side-ink:#F5EFE4;
  --side-faint:#9A9287; --side-line:#2A262F;

  /* The accent as TEXT on a light surface. A brand accent is often too light to
     read: restaurant amber is 2.17:1 on white, e-commerce orange 2.93:1. This
     resolves to the darkened per-industry variant, falling back to our gold. */
  --a-text:var(--v-a-deep,#8A6827);

  --sh:0 1px 2px rgba(28,26,23,.04),0 10px 26px -16px rgba(28,26,23,.14);
  --sh-lg:0 2px 6px rgba(28,26,23,.05),0 26px 56px -28px rgba(28,26,23,.20);
  --shadow:var(--sh-lg);
}

/* ── Dark theme — marketing, checkout, welcome, builder, help ──────────────
   The approved design has no dark mode, but it does have a dark surface: the
   aubergine sidebar. That is the honest basis for this theme — an inversion of
   the editorial system rather than a navy palette borrowed from elsewhere.
   Text values are lifted, hues held. */
.sv-dark{
  --bg:#141217; --cream:#141217; --cream2:#1E1B22;
  --card:#1E1B22; --card-2:#191620;
  --ink:#F5EFE4; --ink-2:#D6CEC1; --muted:#A39A8D; --faint:#A39A8D;
  --line:#2A262F; --line-soft:#221F28;

  /* On aubergine the darkened gold would sink into the background, so the
     accent lifts to the decorative gold — which on this surface is a TEXT
     colour, and passes: #C6A15B on #141217 is 7.4:1. Hue unchanged. */
  --a:var(--v-a-on-dark,var(--v-a,#C6A15B));
  --gold:var(--a); --gold-2:#D9BC85; --gold-soft:#D9BC85; --gold-bg:#241F1A;
  --pine:#7FC9A4; --pine-bg:#12241B;
  --teal:#8ACFC8; --teal-bg:#11231F;
  --red:#E8918A; --red-bg:#2A1715; --danger:#E8918A;

  --side:#0E0C10; --side-2:#1E1B22; --side-ink:#F5EFE4;
  --side-faint:#9A9287; --side-line:#2A262F;

  --a-text:var(--v-a-on-dark,var(--v-a,#C6A15B));

  --sh:0 12px 40px -20px rgba(0,0,0,.55);
  --sh-lg:0 30px 70px -35px rgba(0,0,0,.7);
  --shadow:var(--sh-lg);
}

/* ── The editorial header, shared with the Command Center ─────────────────
   eyebrow with an accent rule · display-face h1 at LOW weight · a bordered
   sub-pill with a status dot. Weight 500–600 on Fraunces is deliberate: the
   approved mockup sets its h1 at 500, and a heavy serif reads as a newspaper
   rather than an editorial. */
.sv-eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--sans);
  font-size:10px;letter-spacing:.19em;text-transform:uppercase;font-weight:700;color:var(--muted)}
.sv-eyebrow::before{content:'';width:14px;height:1.5px;border-radius:2px;background:var(--a);flex:none}
.sv-h1{font-family:var(--font-display);font-size:34px;font-weight:500;letter-spacing:-.022em;
  line-height:1.05;color:var(--ink);margin:11px 0 0}
.sv-h1 em{font-style:normal;font-weight:500;color:var(--a-text)}
.sv-sub{display:inline-flex;align-items:center;gap:9px;font-size:13px;line-height:1.45;
  color:var(--ink-2);background:var(--card);border:1px solid var(--line);border-radius:999px;
  padding:6px 15px 6px 12px;margin-top:11px;max-width:100%}
.sv-sub::before{content:'';width:7px;height:7px;border-radius:50%;flex:none;
  background:var(--a);box-shadow:0 0 0 3px var(--a-soft)}
.sv-sub b{color:var(--ink);font-weight:600}

@media(max-width:760px){
  .sv-h1{font-size:25px;letter-spacing:-.016em;line-height:1.12}
  .sv-sub{font-size:12.4px;padding:5px 12px 5px 10px;margin-top:9px}
  .sv-eyebrow{font-size:9.5px;letter-spacing:.16em}
}

/* Touch targets. These pages are long forms people fill in on a phone from a
   salon floor, so the 44px floor is not optional. Links styled AS buttons were
   missing from this list once, and an <a class="b2"> rendered at 41px. */
@media(max-width:760px){
  .sv-light button, .sv-dark button,
  .sv-light .btn, .sv-dark .btn,
  .sv-light .b1, .sv-dark .b1, .sv-light .b2, .sv-dark .b2,
  .sv-light .bg1, .sv-dark .bg1,
  .sv-light input[type=submit], .sv-dark input[type=submit]{min-height:44px}
  /* min-height alone does not centre the label on an inline-level <a> */
  .sv-light a.b1, .sv-dark a.b1, .sv-light a.b2, .sv-dark a.b2,
  .sv-light a.btn, .sv-dark a.btn{display:inline-flex;align-items:center;justify-content:center}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
