/* ===========================================================================
   Conduit — electrical identity.
   Panel-label aesthetic: near-black structure, safety-yellow accent, copper
   for the small details. A compact grotesque with real personality for
   headings, a workmanlike sans for everything else.
   =========================================================================== */

:root {
  --brand:       #23272e;
  --brand-deep:  #0f1114;
  --brand-tint:  #eceef1;
  --brand-line:  #c9ced6;
  --brand-on:    #ffffff;
  --accent:      #f2c200;
  --accent-tint: #fff6cc;
  --copper:      #b5651d;

  --font-display: "Bricolage Grotesque", "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Public Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
}

h1, h2, h3, h4 { font-weight: 700; letter-spacing: -0.03em; font-variation-settings: "opsz" 48, "wdth" 92; }
.stat-value { font-weight: 800; font-variation-settings: "opsz" 96, "wdth" 88; }

/* Yellow is the highlight colour, never the button colour: black text on it. */
.demo-strip { background: var(--accent-tint); color: #4a3b00; border-bottom-color: #e6c94a; }
.daynum.today { background: var(--accent); color: #111; }
.badge.brand { background: var(--accent-tint); color: #4a3b00; border-color: #e6c94a; }
.nav-item[aria-current="page"] { box-shadow: inset 3px 0 0 var(--accent); }
.brand-mark { background: #111; color: var(--accent); }

/* Dark theme keeps the yellow readable. */
:root[data-theme="dark"] .demo-strip,
:root[data-theme="dark"] .badge.brand { color: var(--accent); background: #2a2400; border-bottom-color: #4a3b00; border-color: #4a3b00; }

/* Panel-label stripe used on the marketing page. */
.label-stripe {
  height: 8px;
  background: repeating-linear-gradient(-45deg, var(--accent) 0 14px, #111 14px 28px);
}