/*
  Appearance tokens shared by Office, Field, portal, and public pages.
  This sheet is linked after each surface sheet. Keep --white as the raised
  surface in dark mode. Foreground tokens name the material beneath the copy,
  so light and dark themes can independently preserve contrast.
*/
:root {
  color-scheme: light;
  --on-dykem: #ffffff;
  --on-alarm: #ffffff;
  --on-warn: #ffffff;
  --on-ink: #ffffff;
}

:root[data-color-scheme="dark"],
:root[data-color-scheme="dark"] body {
  color-scheme: dark;
  --ink-strong: #f3f6f8;
  --ink: #e4e9ee;
  --ink-soft: #c6ced8;
  --muted: #a8b2be;
  --disabled: #788491;
  --placeholder: #9aa5b2;
  --paper: #11161d;
  --white: #1a222c;
  --fill: #202a35;
  --fill-soft: #161e27;
  --line: #384552;
  --line-soft: #2a3540;
  --line-strong: #657382;
  --control-border: #8795a5;
  --dykem: #8faeff;
  --dykem-hover: #b5c9ff;
  --dykem-soft: #1e315a;
  --dykem-line: #5270ba;
  --ok: #6dcc9c;
  --ok-soft: #153d30;
  --ok-line: #37815f;
  --warn: #f2c878;
  --warn-soft: #4a3511;
  --warn-line: #966e24;
  --alarm: #f39284;
  --alarm-soft: #4d2524;
  --alarm-line: #a95149;
  --on-dykem: #071c44;
  --on-alarm: #3a0c09;
  --on-warn: #312000;
  --on-ink: #101820;
  --scrim: rgb(0 0 0 / 68%);
  --scrim-paper: rgb(17 22 29 / 96%);
  --hatch: repeating-linear-gradient(45deg, transparent 0 5px, rgb(143 174 255 / 14%) 5px 6px);
  --shadow-float: 0 12px 32px rgb(0 0 0 / 38%);
  --shadow-paper: 0 14px 36px rgb(0 0 0 / 34%);
}

/* No-script system default. An explicit Light choice supplies the attribute. */
@media (prefers-color-scheme: dark) {
  :root:not([data-color-scheme]),
  :root:not([data-color-scheme]) body {
    color-scheme: dark;
    --ink-strong: #f3f6f8;
    --ink: #e4e9ee;
    --ink-soft: #c6ced8;
    --muted: #a8b2be;
    --disabled: #788491;
    --placeholder: #9aa5b2;
    --paper: #11161d;
    --white: #1a222c;
    --fill: #202a35;
    --fill-soft: #161e27;
    --line: #384552;
    --line-soft: #2a3540;
    --line-strong: #657382;
    --control-border: #8795a5;
    --dykem: #8faeff;
    --dykem-hover: #b5c9ff;
    --dykem-soft: #1e315a;
    --dykem-line: #5270ba;
    --ok: #6dcc9c;
    --ok-soft: #153d30;
    --ok-line: #37815f;
    --warn: #f2c878;
    --warn-soft: #4a3511;
    --warn-line: #966e24;
    --alarm: #f39284;
    --alarm-soft: #4d2524;
    --alarm-line: #a95149;
    --on-dykem: #071c44;
    --on-alarm: #3a0c09;
    --on-warn: #312000;
    --on-ink: #101820;
    --scrim: rgb(0 0 0 / 68%);
    --scrim-paper: rgb(17 22 29 / 96%);
    --hatch: repeating-linear-gradient(45deg, transparent 0 5px, rgb(143 174 255 / 14%) 5px 6px);
    --shadow-float: 0 12px 32px rgb(0 0 0 / 38%);
    --shadow-paper: 0 14px 36px rgb(0 0 0 / 34%);
  }
}

/* A service record and a signature are physical artifacts, even at night. */
:is(:root[data-color-scheme="dark"], :root:not([data-color-scheme])) .paper {
  background: #fffefa;
  color: #151a22;
  --ink-strong: #11151b;
  --ink: #151a22;
  --ink-soft: #343b46;
  --muted: #59616d;
  --disabled: #8d949e;
  --placeholder: #626b77;
  --white: #ffffff;
  --fill: #eef1f4;
  --fill-soft: #f5f7f9;
  --line: #d9dee5;
  --line-soft: #e9edf1;
  --line-strong: #8b95a1;
  --control-border: #737c87;
  --dykem: #1e3fae;
  --dykem-hover: #18348f;
  --dykem-soft: #edf1ff;
  --dykem-line: #adbae9;
  --ok: #176b48;
  --warn: #875b00;
  --alarm: #983627;
  --on-dykem: #ffffff;
  --on-alarm: #ffffff;
  --on-warn: #ffffff;
  --on-ink: #ffffff;
}

:is(:root[data-color-scheme="dark"], :root:not([data-color-scheme])) .pad-wrap {
  background: #ffffff;
  color: #151a22;
  --muted: #59616d;
  --line-strong: #737c87;
}