:root {
  /* Bevel depth tokens */
  --bevel-hi:        rgba(255, 255, 255, 0.55);
  --bevel-lo:        rgba(0, 0, 0, 0.35);
  --drop-shadow:     0 1px 2px rgba(0, 0, 0, 0.30), 0 2px 6px rgba(0, 0, 0, 0.15);

  /* Solid fills — flat, no gradients */
  --fill-control:        #dcdcdc;
  --fill-control-hover:  #e9e9e9;
  --fill-surface:        #e6e6e6;
  --fill-header:         #2a3a4a;
  --fill-footer:         #1f2c38;

  /* SVG noise (decorative texture; aria-hidden by virtue of being CSS background) */
  --noise: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .05 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");

  /* Geometry — square corners (no rounded borders) */
  --radius-ui:    0;
  --radius-tile:  0;

  /* Typography */
  --text-body:     #1a1a1a;
  --text-disabled: #5a5a5a;
  --text-on-dark:  #f4f4f4;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

html, body { margin: 0; padding: 0; background: #d8d4cc; color: var(--text-body); font-family: var(--font-sans); }

@media print {
  :root { --fill-surface: #fff; --fill-control: #fff; --fill-header: #fff; --noise: none; }
  body { background: #fff; color: #000; }
}