/* One continuous gradient, sized by content rather than the viewport.
   Percentage endpoints automatically follow every future page-height change. */
:root {
  --page-top: #f2f1ee;
  --page-bottom: #090a0e;
  --ink: #101114;
  --secondary: #303136;
  --line: rgba(16, 17, 20, .25);
}
[data-page-gradient] {
  background: linear-gradient(180deg, var(--page-top) 0%, var(--page-bottom) 100%);
  background: linear-gradient(180deg in srgb, var(--page-top) 0%, var(--page-bottom) 100%);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-attachment: scroll;
  min-height: 100vh;
}
/* The companion script chooses contrast from the actual background behind
   each element, including neutral surfaces such as the sticky order panel. */
[data-gradient-tone="dark"] {
  --ink: #000000;
  --secondary: #000000;
  --line: rgba(16, 17, 20, .28);
  --studio-ink: #000000;
  --studio-secondary: #000000;
  --studio-line: rgba(16, 17, 20, .28);
  color: var(--ink);
  color-scheme: light;
}
[data-gradient-tone="light"] {
  --ink: #ffffff;
  --secondary: #ffffff;
  --line: rgba(250, 250, 250, .3);
  --studio-ink: #ffffff;
  --studio-secondary: #ffffff;
  --studio-line: rgba(250, 250, 250, .3);
  color: var(--ink);
  color-scheme: dark;
}
[data-gradient-tone="dark"][data-gradient-muted] { --secondary: #303136; --studio-secondary: #303136; }
[data-gradient-tone="light"][data-gradient-muted] { --secondary: #d9dadd; --studio-secondary: #d9dadd; }
[data-page-gradient] :focus-visible,
#green-studio-home :focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
  box-shadow: 0 0 0 6px #101114;
}