/* Direction: shopfloor ledger — warm concrete paper, graphite ink, safety orange */
/* Completed by the platform from the short form: both modes, every
   palette token, each text-on-ground pair at its floor. To restyle, write the
   short form again (the decisions in one :root) and it is completed again. */

:root {
  --canvas: #f2f0ea;
  --surface: #fbfaf7;
  --surface-2: #e7e5de;
  --border: #d4d0ca;
  --border-strong: #b2aba4;
  --ink: #1b1f24;
  --muted: #606262;
  --accent: #d9480f;
  --accent-hover: #b83d0d;
  --accent-ink: #1e0a02;
  --accent-text: #ad3a0a;
  --accent-strong: #a9380c;
  --accent-soft: #efd8cb;
  --accent-border: #e7a487;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #d7e3d5;
  --success-strong: #116d34;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #ebddcf;
  --warning-strong: #994607;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #ebd7d1;
  --danger-strong: #b91c1c;
  --chart-1: #d9480f;
  --chart-2: #9b860b;
  --chart-3: #147c4e;
  --chart-4: #1292ad;
  --chart-5: #5250cf;
  --chart-6: #d85bbb;

  --font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-body: "IBM Plex Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --display-weight: 600;
  --display-tracking: 0.005em;
  --radius-card: 6px;
  --radius-btn: 4px;
  --radius-input: 4px;
  --x-grid: #8a8a8a33;
  --font-sans: "IBM Plex Sans", system-ui, sans-serif;
  --eyebrow-tracking: 0.08em;
}

html[data-theme="dark"] {
  --canvas: #100602;
  --surface: #281f1b;
  --surface-2: #1c120f;
  --border: #312925;
  --border-strong: #58514e;
  --ink: #f2f0ea;
  --muted: #98928d;
  --accent: #d9480f;
  --accent-hover: #df6333;
  --accent-ink: #1e0a02;
  --accent-text: #df6434;
  --accent-strong: #df6434;
  --accent-soft: #3c1505;
  --accent-border: #6a2408;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #11210f;
  --success-strong: #499c68;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #341704;
  --warning-strong: #c57a40;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #350b08;
  --danger-strong: #d16969;
  --chart-1: #d9480f;
  --chart-2: #b29b1a;
  --chart-3: #129860;
  --chart-4: #1ba6c4;
  --chart-5: #6a6dee;
  --chart-6: #df61c1;
}

.dropzone { border: 2px dashed var(--border-strong, var(--border)); transition: border-color .15s, background-color .15s; }
.dropzone:hover, .dropzone:focus-within { border-color: var(--accent); }
.swatch { width: .7rem; height: .7rem; border-radius: 2px; display: inline-block; }
.seg { display: inline-flex; flex-shrink: 0; border: 1px solid var(--border-strong, var(--border)); border-radius: var(--radius-btn); overflow: hidden; background: var(--surface); }
.seg button { padding: .35rem .7rem; font-size: .75rem; font-weight: 500; color: var(--muted); border-right: 1px solid var(--border); transition: background-color .12s, color .12s; }
.seg button:last-child { border-right: 0; }
.seg button:hover { background: var(--surface-2); color: var(--ink); }
.seg button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.seg button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-strong); }
.seg button:active { transform: translateY(1px); }
.heat td { text-align: center; font-family: var(--font-mono); font-size: .7rem; padding: .4rem .35rem; min-width: 2.6rem; border: 2px solid var(--surface); }
.rule-top { border-top: 3px solid var(--ink); }