/* EzEComOP design tokens: warm paper, ink text, one terracotta accent.
   Pages read roles, never raw colors. Serif is for page titles and display copy only. */
:root {
  color-scheme: light dark;
  --paper: #f7f2ea; --surface: #fffcf7; --sunken: #f1eadf; --hover: #ece4d7;
  --ink: #1f1b16; --ink-2: #463f36; --muted: #6b6255;
  --line: #e5dccd; --line-strong: #d6cab7; --control: #8e816d;
  --accent: #b84a24; --accent-hover: #9e3d1b; --on-accent: #fffaf3;
  --accent-ink: #a3401d; --accent-tint: #f8e7db; --on-tint: #8a3517;
  --focus: #b84a24;
  --ok: #2f6b45; --ok-bg: #e4efe4;
  --warn: #855400; --warn-bg: #f8ebcc;
  --danger: #a3271c; --danger-bg: #f9e1db;
  --info: #2e5578; --info-bg: #e3eaf1;
  --disabled-bg: #ebe4d8; --disabled-ink: #625a4d;
  --scrim: #2a1f1466;
  --shadow-lift: 0 1px 0 #3c2d1a0a, 0 10px 28px -16px #3c2d1a40;
  --shadow-pop: 0 1px 2px #3c2d1a10, 0 24px 56px -20px #3c2d1a59;

  --font-sans: EzSans, system-ui, -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans CJK SC", "Source Han Sans SC", sans-serif;
  --font-serif: EzSerif, "Noto Serif SC", "Noto Serif CJK SC", "Source Han Serif SC", "Songti SC", STSong, serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --fs-display: clamp(40px, 4.4vw, 60px); --fs-h1: 32px; --fs-h2: 22px; --fs-h3: 17px;
  --fs-lead: 16px; --fs-body: 14px; --fs-small: 13px; --fs-caption: 12px;
  --r-s: 4px; --r-m: 8px; --r-l: 12px;
  --ease: cubic-bezier(.2, .7, .2, 1); --dur: .16s;
  --sidebar: 248px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #171512; --surface: #1f1c18; --sunken: #141210; --hover: #2b2722;
    --ink: #f1ebe1; --ink-2: #d6cdbf; --muted: #b0a695;
    --line: #36312a; --line-strong: #4a443b; --control: #8f8572;
    --accent: #f0a07a; --accent-hover: #f5b693; --on-accent: #2b1206;
    --accent-ink: #f2a885; --accent-tint: #3b251a; --on-tint: #f8c8ab;
    --focus: #f0a07a;
    --ok: #9fd0ae; --ok-bg: #1d3125;
    --warn: #ecc077; --warn-bg: #3a2e17;
    --danger: #f3a597; --danger-bg: #3e211c;
    --info: #a9c4df; --info-bg: #1d2a37;
    --disabled-bg: #2a2621; --disabled-ink: #b0a695;
    --scrim: #000000a0;
    --shadow-lift: 0 0 0 1px #36312a;
    --shadow-pop: 0 0 0 1px #4a443b, 0 24px 56px -20px #000000cc;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 var(--fs-body)/1.7 var(--font-sans);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
h1, h2, h3, h4 { font-weight: 600; line-height: 1.4; }
a { color: var(--accent-ink); text-decoration: none; }
img, svg { vertical-align: middle; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
button, a, input, select, textarea, summary {
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  touch-action: manipulation;
}
input, select, textarea { min-width: 0; }
code, kbd, pre, samp { font-family: var(--font-mono); font-size: .92em; }
table { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r-s); }
::selection { background: var(--accent-tint); color: var(--ink); }
::placeholder { color: var(--muted); opacity: 1; }
[hidden] { display: none !important; }
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; left: 16px; top: -80px; z-index: 1000; padding: 10px 16px;
  background: var(--surface); color: var(--ink); border: 1px solid var(--control); border-radius: var(--r-m);
}
.skip-link:focus { top: 12px; }
.ui-icon { width: 18px; height: 18px; flex: none; stroke: currentColor; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}