/* Bumatic — Semantic tokens
 * Maps raw palette + scales onto UI roles. Follows brand rules:
 *  - Primary (Verdigris) leads; Yellow is accent/warning only.
 *  - Light "paper": black/white + Statuario. Dark "digital": Bitumen + Sand/Teal/Yellow.
 */
:root {
  /* Text */
  --text-strong:   var(--bitumen);       /* headers (Onest Black) */
  --text-body:     #26303A;              /* body copy */
  --text-muted:    var(--neutral-600);
  --text-faint:    var(--neutral-500);
  --text-on-dark:  var(--statuario);
  --text-on-brand: var(--white);         /* signature: white text on Verdigris */
  --text-accent:   var(--verdigris);
  --text-link:     var(--verdigris);
  --text-link-hover: var(--verdigris-800);

  /* Surfaces (light) */
  --surface-page:   var(--neutral-050);
  --surface-card:   var(--white);
  --surface-sunken: var(--neutral-100);
  --surface-brand:  var(--verdigris);    /* signature background */
  --surface-brand-soft: var(--verdigris-100);

  /* Surfaces (dark / digital UX) */
  --surface-page-dark:   var(--bitumen);
  --surface-card-dark:   #16202A;
  --surface-raised-dark: #1E2A34;

  /* Borders / lines */
  --border:        var(--neutral-200);
  --border-strong: var(--neutral-300);
  --border-brand:  var(--verdigris-500);
  --border-dark:   #2A3742;

  /* Status / semantic (industrial telemetry) */
  --status-ok:      var(--teal);         /* online / synced / ready */
  --status-warning: var(--yellow);       /* Yellow = WARNING (brand rule) */
  --status-alert:   var(--clay);         /* material alert / attention */
  --status-info:    var(--slate);
  --status-idle:    var(--concrete);

  /* Focus ring */
  --ring: var(--teal);

  /* Radii — restrained, mechanical */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-pill: 999px;

  /* Elevation — low, functional shadows (no soft glows) */
  --shadow-sm: 0 1px 2px rgba(16,24,32,0.06), 0 1px 1px rgba(16,24,32,0.04);
  --shadow-md: 0 2px 6px rgba(16,24,32,0.08), 0 1px 2px rgba(16,24,32,0.06);
  --shadow-lg: 0 10px 28px rgba(16,24,32,0.12), 0 2px 6px rgba(16,24,32,0.08);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.5);

  /* Motion — crisp, disciplined; no bounce */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1); /* @kind other */
  --ease-exit: cubic-bezier(0.4, 0, 1, 1); /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur-med: 200ms; /* @kind other */
  --dur-slow: 320ms; /* @kind other */
}