/* Approved site palette. Neutral surfaces reference the AllWedge SaaS app. */
:root[data-palette="mono"] {
  --green: #252525;
  --green-dark: #121212;
  --cream: #fafafa;
  --yellow: #f4f4f5;
  --ink: #18181b;
  --muted: #626269;
  --line: #dedee1;
  --page: #f3f3f4;
  --page-ink: #18181b;
  --surface: #ebebee;
  --panel: #ffffff;
  --secondary: #626269;
  --accent: #252525;
  --rule: #d5d5d9;
  --mono-paper: #ffffff;
  --mono-paper-ink: #202024;
  --mono-paper-muted: #63636a;
  --mono-paper-line: #dddde1;
  --mono-stage: #e4e4e8;
  --mono-stage-light: #f6f6f8;
  --mono-cast: rgb(20 20 26 / .12);
  --mono-dark: #202022;
  --mono-dark-line: #454549;
  --mono-dark-muted: #c0c0c6;
  --mono-success: #226342;
  --mono-success-wash: #e8f3ed;
  --mono-focus: #75757d;
  --header-glass: rgb(250 250 252 / .97);
  --header-glass-solid: #f3f3f4;
  --header-rim: rgb(255 255 255 / .86);
  --header-reflection: rgb(255 255 255 / .52);
}

:root[data-palette="mono"][data-theme="dark"] {
  --page: #0f0f0f;
  --page-ink: #fafafa;
  --surface: #141414;
  --panel: #1c1c1c;
  --secondary: #a3a3a3;
  --accent: #fafafa;
  --rule: #333333;
  --line: #333333;
  --muted: #a3a3a3;
  --mono-paper: #2b2b2e;
  --mono-paper-ink: #fafafa;
  --mono-paper-muted: #c0c0c6;
  --mono-paper-line: #48484d;
  --mono-stage: #202022;
  --mono-stage-light: #333336;
  --mono-cast: rgb(0 0 0 / .3);
  --mono-dark: #141416;
  --mono-dark-line: #444448;
  --mono-success: #a0e0ba;
  --mono-success-wash: #193a29;
  --mono-focus: #ababaf;
  --header-glass: rgb(25 25 27 / .97);
  --header-glass-solid: #1c1c1e;
  --header-rim: rgb(255 255 255 / .20);
  --header-reflection: rgb(255 255 255 / .13);
}

/* The hero stage carries the light; type and controls form a neutral frame. */
:root[data-palette="mono"] .button {
  border-radius: 10px;
  box-shadow: 0 1px 2px rgb(0 0 0 / .05);
}
/* Buttons stay put on hover: a tint of the label colour fades in over the fill at once. A press presses them in.
   The tint is its own layer under the label, so only its opacity changes. */
:root[data-palette="mono"] .button { position: relative; isolation: isolate; }
:root[data-palette="mono"] .button::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: currentColor; opacity: 0; transition: opacity .1s ease; pointer-events: none; }
:root[data-palette="mono"] .button:hover::after { opacity: var(--button-tint); }
/* Hover strengths, tuned on screen. The layer takes the label's colour, so light buttons darken and dark ones lift,
   since near-black cannot visibly darken. Glass buttons get the faintest layers in both themes. */
:root[data-palette="mono"] .button { --button-tint: .1; }
:root[data-palette="mono"] .button.button-glass { --button-tint: .025; }
:root[data-palette="mono"][data-theme="light"] .button.button-glass { --button-tint: .035; }
:root[data-palette="mono"] .button:active { transform: scale(.97); }
:root[data-palette="mono"] .button-green { background: var(--accent); color: var(--page); }
:root[data-palette="mono"] .button-yellow,
:root[data-palette="mono"] .button-cream { background: #fafafa; color: #18181b; }
:root[data-palette="mono"] :is(button, a, input, summary):focus-visible { outline-color: var(--mono-focus); }
:root[data-palette="mono"] ::selection { background: #cfcfd6; color: #18181b; }
:root[data-palette="mono"] .header::before {
  box-shadow: 0 12px 38px rgb(0 0 0 / .12), 0 2px 8px rgb(0 0 0 / .06);
}
:root[data-palette="mono"] .header::after {
  background: linear-gradient(125deg, var(--header-reflection), transparent 24%, transparent 72%, rgb(255 255 255 / .06));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .22), inset 0 -1px 0 rgb(0 0 0 / .08);
}
:root[data-palette="mono"] .header.is-scrolled .nav-demo { background: var(--accent); color: var(--page); }
:root[data-palette="mono"] .header .mobile-nav {
  box-shadow: inset 0 1px 0 var(--header-reflection), 0 16px 40px rgb(0 0 0 / .18);
}
:root[data-palette="mono"] .theme-track,
:root[data-palette="mono"] .header.is-scrolled .theme-track {
  background: rgb(128 128 138 / .18);
  border-color: rgb(150 150 160 / .45);
  box-shadow: inset 0 1px 4px rgb(0 0 0 / .08);
}
:root[data-palette="mono"] .theme-thumb { background: #fafafa; color: #3f3f46; box-shadow: 0 2px 5px rgb(0 0 0 / .2); }
:root[data-palette="mono"] .theme-toggle:hover .theme-track { border-color: #a3a3ab; }

/* Silver surfaces, quiet dividers, and clear text hierarchy. */
:root[data-palette="mono"] .ticker { background: #1c1c1e; color: #f4f4f5; border-block: 1px solid #343438; }
:root[data-palette="mono"] .ticker-star { color: #a9a9b2; }
:root[data-palette="mono"] :is(.feature-symbol, .operation-details, .feature-tabs, .step-number) { border-color: var(--rule); }
:root[data-palette="mono"] :is(.feature-tabs button, .step-number, .detail-number) { color: var(--secondary); }
:root[data-palette="mono"] .feature-tabs button[aria-selected="true"] { color: var(--accent); border-color: var(--accent); }
:root[data-palette="mono"] .feature-tabs button:hover { color: var(--accent); }
:root[data-palette="mono"] .feature-panel { box-shadow: inset 0 0 0 1px var(--rule), 0 8px 28px rgb(0 0 0 / .025); }
:root[data-palette="mono"] .inline-link { border-color: var(--accent); color: var(--accent); }

/* Keep the playful angles. Give the cards the app's soft, silvery elevation. */
:root[data-palette="mono"] .platform-art {
  --art-paper: var(--mono-paper);
  --art-ink: var(--mono-paper-ink);
  --art-muted: var(--mono-paper-muted);
  --art-line: var(--mono-paper-line);
  --art-shadow: var(--mono-cast);
  background: radial-gradient(ellipse at 25% 12%, var(--mono-stage-light), transparent 70%), var(--mono-stage);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .22);
}
:root[data-palette="mono"] .story-card {
  box-shadow: 0 2px 3px var(--mono-cast), 0 12px 22px var(--mono-cast), 0 28px 42px rgb(0 0 0 / .06), inset 0 1px 0 rgb(255 255 255 / .12);
}
:root[data-palette="mono"] .story-notification {
  background: var(--mono-paper);
  color: var(--mono-paper-ink);
  border-color: var(--mono-paper-line);
  box-shadow: 0 3px 6px var(--mono-cast), 0 12px 24px var(--mono-cast), inset 0 1px 0 rgb(255 255 255 / .12);
}
:root[data-palette="mono"] .story-notification div > span { color: var(--mono-paper-muted); }
:root[data-palette="mono"] .notification-icon { background: var(--mono-success-wash); color: var(--mono-success); }
:root[data-palette="mono"] .notification-spark { color: var(--mono-paper-muted); }
:root[data-palette="mono"] .return-notification .notification-icon { background: var(--mono-stage); color: var(--mono-paper-ink); }
:root[data-palette="mono"] :is(.access-pass, .return-card) {
  background: linear-gradient(140deg, #363638, var(--mono-dark) 75%);
  color: #fafafa;
  border-color: var(--mono-dark-line);
}
:root[data-palette="mono"] :is(.access-title > .card-eyebrow, .access-timing, .session-live) { color: var(--mono-dark-muted); }
:root[data-palette="mono"] .session-live > span { background: #a0e0ba; }

:root[data-palette="mono"] .access-progress { background: #505055; }
:root[data-palette="mono"] .access-progress > span { background: #e4e4e7; }
:root[data-palette="mono"] .return-card-bottom { border-color: #57575d; color: #d4d4d8; }

/* Pricing and the sign-off use the same graphite as the product itself. */
:root[data-palette="mono"] .pricing { background: var(--surface); color: var(--page-ink); }
:root[data-palette="mono"] .pricing-intro > p { color: var(--secondary); }
:root[data-palette="mono"] .pricing-card {
  background: linear-gradient(145deg, #333335, #19191b 70%);
  color: #fafafa;
  box-shadow: inset 0 0 0 1px #49494e, inset 0 1px 0 #646469, 0 18px 40px rgb(0 0 0 / .12);
}
:root[data-palette="mono"] .all-included { background: rgb(255 255 255 / .06); color: #f4f4f5; border-color: #606066; }
:root[data-palette="mono"] .pricing-rule { background: #4c4c52; }
:root[data-palette="mono"] .closing { background: #18181b; }

:root[data-palette="mono"] .closing-emblem { color: #f4f4f5; }
:root[data-palette="mono"] .footer { background: #111113; color: #fafafa; }
:root[data-palette="mono"] .footer-bottom { color: #b6b6bc; border-color: #3a3a3e; }
:root[data-palette="mono"] :is(.footer-nav a, .footer-bottom a):hover { color: #ffffff; }

@media (prefers-reduced-transparency: reduce) {
  :root[data-palette="mono"] .header::after { background: none; }
}
@media (forced-colors: active) {
  :root[data-palette="mono"] .header::after { background: none; border-color: CanvasText; }
}