/* ===========================================================================
 * MetaXceed — time-of-day theme
 *
 * Light 06:00–17:59 Pacific, dark 18:00–05:59. The switch is a small inline
 * script in each page's <head> that stamps data-theme on <html> before the
 * first paint; this file supplies the palette it selects.
 *
 * Every page carries its own inline <style> with the same 20-token :root
 * palette, so most of the dark theme is done by re-pointing those tokens.
 * The rules below are the places where a literal light colour was baked into
 * a component and has to be answered directly.
 *
 * Link this AFTER the page's inline <style>. Every dark rule is scoped to the
 * data-theme attribute, so it outranks the unscoped original on specificity
 * and source order is belt-and-braces rather than load-bearing.
 * ========================================================================= */

/* Declared here as well as in the pages so nothing force-inverts a page that
   has not yet been given a theme. */
:root{color-scheme:light}

:root[data-theme="dark"]{
  color-scheme:dark;

  /* ---- core palette ------------------------------------------------- */
  --bg:#151412;
  --ink:#f3efe9;
  --muted:#a89d92;
  --line:rgba(243,239,233,.14);
  --card:#1e1c1a;

  /* Brand accents carry over unchanged — coral, pink, violet, blue and amber
     all hold up on a dark ground. Green is the exception: #639922 is too dark
     to read as a tick or a label. */
  --green:#8fc23f;
  --red:#f07070;

  /* The intentionally-dark panels (terminal stage, numbers band) sat at
     #1a1b1b against a near-white page. On a dark page they would vanish into
     the background, so they lift to stay readable as distinct surfaces. */
  --dark:#232120;
  --dark-2:#2b2927;

  /* Tints become translucent washes rather than pale solids, so they read as
     a tinted panel instead of a light patch. */
  --tint-coral:rgba(255,122,89,.16);
  --tint-pink:rgba(255,77,141,.16);
  --tint-violet:rgba(139,92,246,.22);
  --tint-blue:rgba(55,138,221,.18);
  --tint-green:rgba(99,153,34,.22);
  --tint-amber:rgba(245,166,35,.18);
  --tint-red:rgba(214,69,69,.18);

  /* ---- configurator tokens ------------------------------------------ */
  /* Selection: a violet fill reads against both the dark card behind it
     (4.0:1) and the white glyph on top of it (4.2:1). The black fill it
     replaces cleared neither. */
  --sel-bg:#8b5cf6;
  --sel-fg:#ffffff;
  --sel-ring:#a78bfa;
  --seg-on-bg:#332f2b;
  --seg-on-ring:#a78bfa;

  --surface-2:#262320;
  --surface-3:#221f1d;
  --edge:rgba(243,239,233,.34);
  --edge-hover:rgba(243,239,233,.3);
  --shadow-1:rgba(0,0,0,.45);
  --shadow-2:rgba(0,0,0,.5);
  --shadow-3:rgba(0,0,0,.6);
  --veil:rgba(21,20,18,.97);
  --veil-nav:rgba(21,20,18,.86);

  /* Inverted so the "strong" button still reads as the emphatic one. */
  --btn-dark-bg:#f3efe9;
  --btn-dark-fg:#151412;
}

/* ===========================================================================
 * Shared chrome — present on every page
 * ========================================================================= */
[data-theme="dark"] nav{background:rgba(21,20,18,.86)}
[data-theme="dark"] .mobile-menu{background:rgba(21,20,18,.97);box-shadow:0 18px 40px rgba(0,0,0,.5)}
[data-theme="dark"] .eyebrow{background:rgba(255,255,255,.06)}
[data-theme="dark"] .chip{background:var(--card)}
[data-theme="dark"] .card:hover,
[data-theme="dark"] .step:hover{box-shadow:0 18px 40px rgba(0,0,0,.45)}
[data-theme="dark"] .t-amber{background:var(--tint-amber)}

/* The alternating light band. On a dark page it becomes a slightly lifted
   panel rather than a slightly recessed one — same job, opposite direction. */
[data-theme="dark"] .alt,
[data-theme="dark"] .features,
[data-theme="dark"] .models{background:#1b1917}

/* Deep drop shadows are invisible on a dark ground; these go to black. */
[data-theme="dark"] .stage{box-shadow:0 30px 80px rgba(0,0,0,.6)}
[data-theme="dark"] .qc-term{box-shadow:0 24px 60px rgba(0,0,0,.55)}
[data-theme="dark"] .model-panel{box-shadow:0 18px 50px rgba(0,0,0,.45)}

/* ===========================================================================
 * careers.html
 * ========================================================================= */
[data-theme="dark"] .role-head{background:linear-gradient(180deg,rgba(255,122,89,.1),transparent)}
[data-theme="dark"] .role-foot{background:var(--surface-3,#221f1d)}
[data-theme="dark"] .role-sec ul li,
[data-theme="dark"] .callout{color:#d9d1c8}
[data-theme="dark"] .tag{background:var(--card)}

/* ===========================================================================
 * doloup.html — including the SVG loop diagram, whose fills are literals
 * ========================================================================= */
[data-theme="dark"] .builds-val{background:rgba(16,163,127,.2);color:#6ed3b4}
[data-theme="dark"] .reconcile{border-color:rgba(243,239,233,.22)}
[data-theme="dark"] .node rect{fill:#2b2927}
[data-theme="dark"] .station rect{fill:#232120;stroke:rgba(243,239,233,.18)}
[data-theme="dark"] .ring-track{stroke:rgba(243,239,233,.12)}
[data-theme="dark"] .st-lab,
[data-theme="dark"] .center-big{fill:#f3efe9}
[data-theme="dark"] .st-cap,
[data-theme="dark"] .center-lab{fill:#a89d92}

/* ===========================================================================
 * apply.html and status.html — form surfaces and status badges
 * ========================================================================= */
[data-theme="dark"] .btn-ghost,
[data-theme="dark"] .choice,
[data-theme="dark"] .filechip,
[data-theme="dark"] .add-btn,
[data-theme="dark"] .timeline li::before{background:var(--card)}
[data-theme="dark"] input[type=text],
[data-theme="dark"] input[type=email],
[data-theme="dark"] input[type=tel],
[data-theme="dark"] input[type=url],
[data-theme="dark"] input[type=number],
[data-theme="dark"] input[type=date],
[data-theme="dark"] select,
[data-theme="dark"] textarea{background:var(--surface-3,#221f1d);color:var(--ink)}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder{color:var(--muted)}
[data-theme="dark"] .entry,
[data-theme="dark"] .notes li,
[data-theme="dark"] .review-sec > header{background:var(--surface-3,#221f1d)}
[data-theme="dark"] .drop,
[data-theme="dark"] .add-btn{border-color:rgba(243,239,233,.28)}
[data-theme="dark"] .rv dd.empty,
[data-theme="dark"] .timeline li.pending h4{color:var(--muted)}

/* Status badges: the light-mode text colours are all far too dark to read on
   their own tinted background once that tint goes translucent. */
[data-theme="dark"] .notice.bad{color:#f7a3a3;border-color:rgba(214,69,69,.4)}
[data-theme="dark"] .b-review{color:#94c3f0}
[data-theme="dark"] .b-progress{color:#c9b6f9}
[data-theme="dark"] .b-offer{color:#b7dc7c}
[data-theme="dark"] .b-closed{background:rgba(243,239,233,.08);color:var(--muted)}

/* ===========================================================================
 * sce-configurator.html
 * ========================================================================= */
[data-theme="dark"] .estimate-panel{box-shadow:0 14px 38px var(--shadow-1)}
[data-theme="dark"] .sheet{box-shadow:0 30px 80px var(--shadow-3)}
[data-theme="dark"] .estimate-bar{box-shadow:0 -10px 30px var(--shadow-2)}
[data-theme="dark"] dialog::backdrop{background:rgba(0,0,0,.62)}

[data-theme="dark"] .est-badge.pass{color:#b7dc7c;border-color:rgba(143,194,63,.4)}
[data-theme="dark"] .est-badge.check{background:var(--tint-amber);color:#f0c06a;border-color:rgba(245,166,35,.4)}
[data-theme="dark"] .opt-badge{color:#c9b6f9}
[data-theme="dark"] .est-lines .v .tbc{color:#f0c06a}

[data-theme="dark"] .essential-head{border-color:rgba(143,194,63,.3)}
[data-theme="dark"] .essential-head strong{color:#d3e9ae}
[data-theme="dark"] .essential-head p{color:#bcd894}
[data-theme="dark"] .essential-head .lock{background:var(--card)}

[data-theme="dark"] .doloup-block{background:linear-gradient(150deg,rgba(139,92,246,.22),rgba(255,77,141,.12));border-color:rgba(139,92,246,.4)}
[data-theme="dark"] .doloup-block .dl-eyebrow{color:#c9b6f9}
[data-theme="dark"] .req-check.dl{background:rgba(255,255,255,.1)}

[data-theme="dark"] .pri.critical{color:#f7a3bd}
[data-theme="dark"] .pri.high{color:#f0c06a}
[data-theme="dark"] .pri.medium{color:#94c3f0}

[data-theme="dark"] .form-msg.err{background:rgba(255,77,141,.14);color:#f7a3bd;border-color:rgba(255,77,141,.36)}
[data-theme="dark"] .form-msg.ok{background:var(--tint-green);color:#c6e39f;border-color:rgba(143,194,63,.36)}
[data-theme="dark"] .field .err{color:#f7a3bd}
[data-theme="dark"] .field input,
[data-theme="dark"] .field select,
[data-theme="dark"] .field textarea{background:var(--surface-3);color:var(--ink)}
