/* AUTO-GENERATED from /design/signal-tokens.css by scripts/sync-signal-tokens.js — DO NOT EDIT. */
/* ============================================================
   bLocal · Signal — design tokens (CANONICAL SOURCE OF TRUTH)
   ------------------------------------------------------------
   This file is the single source. Do NOT hand-edit the copies in
   backend/static/css/ or frontend/src/app/ — they are generated by
   `node scripts/sync-signal-tokens.js` (npm run sync:tokens).

   Names describe ROLE, not appearance. Framework-neutral custom
   properties: consumed by NEXT (Tailwind v3), the Django dashboard
   (base.html) and the Django public sites (theme_base.html).

   Stage 3 split — STRUCTURAL vs ACCENT:
     • STRUCTURAL tokens (surfaces, borders, text, spacing, radii,
       elevation, type, motion, status) are shared by ALL surfaces,
       including the visitor-facing published sites.
     • ACCENT tokens (Signal green + states) are for the operator
       chrome (dashboard + NEXT) ONLY. Published sites keep their own
       per-publication brand accent (var(--brand-*) / --theme-*); they
       must NOT consume --color-accent for their accent. See stage3-notes.md.

   Stage 3 is ADDITIVE: defining these variables changes nothing until
   a primitive or template consumes them. No existing token is repointed.
   ============================================================ */

:root {
  /* ===== STRUCTURAL — shared by every surface ===== */

  /* ── Surfaces / elevation ── */
  --color-bg:               #f1f4f1;   /* app canvas */
  --color-surface-raised:   #ffffff;   /* cards, panels, forms */
  --color-surface-sunken:   #f7f9f7;   /* inset fields, table header */
  --color-surface-inverse:  #0a0a0a;   /* global top bar */

  /* ── Borders & dividers ── */
  --color-border:           #e6e8e6;
  --color-border-strong:    #dfe3df;
  --color-divider:          #eef0ee;
  --color-border-brand-grey:#bac2ba;

  /* ── Text hierarchy ── */
  --color-text-strong:           #0a0a0a;
  --color-text-body:             #2a2e2a;
  --color-text-muted:            #6b6f6b;
  --color-text-faint:            #9aa09a;
  --color-text-on-inverse:       #ffffff;
  --color-text-on-inverse-muted: #b9bdb9;
  --color-text-on-inverse-faint: #7a7e7a;
  --color-text-on-accent:        #ffffff;
  --color-text-on-accent-muted:  #dbe7d2;

  /* ── Status (foreground + subtle bg) — structural ── */
  --color-success:       #3b7d23;
  --color-success-bg:    #e8efe2;
  --color-warning:       #9a6b00;
  --color-warning-bg:    #f5edda;
  --color-error:         #c0392b;
  --color-error-bg:      #fbeae8;
  --color-error-border:  #f0d6d2;
  --color-info:          #2563a8;
  --color-info-bg:       #e6eef7;

  /* ── Typography ── */
  --font-display: 'Geist', sans-serif;
  --font-body:    'Inter', sans-serif;

  --text-display-size:    32px;  --text-display-weight:    800;  --text-display-leading:    1.1;   --text-display-tracking: -0.025em;
  --text-h1-size:         25px;  --text-h1-weight:         800;  --text-h1-leading:         1.15;  --text-h1-tracking:      -0.02em;
  --text-h2-size:         18px;  --text-h2-weight:         800;  --text-h2-leading:         1.2;    --text-h2-tracking:       0;
  --text-h3-size:         15px;  --text-h3-weight:         700;  --text-h3-leading:         1.3;    --text-h3-tracking:       0;
  --text-body-size:       14px;  --text-body-weight:       400;  --text-body-leading:       1.6;
  --text-body-sm-size:    13px;  --text-body-sm-weight:    500;  --text-body-sm-leading:    1.5;
  --text-label-size:      12px;  --text-label-weight:      600;  --text-label-leading:      1.4;
  --text-caption-size:    11px;  --text-caption-weight:    500;  --text-caption-leading:    1.4;

  /* ── Spacing (4-based) ── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  /* ── Radii ── */
  --radius-sm:   8px;
  --radius-md:   11px;
  --radius-lg:   14px;
  --radius-pill: 999px;

  /* ── Elevation ── */
  --shadow-sm:     0 1px 2px rgba(10, 10, 10, 0.05);
  --shadow-md:     0 1px 3px rgba(10, 10, 10, 0.06);
  --shadow-lg:     0 4px 12px rgba(10, 10, 10, 0.10);
  --shadow-accent: 0 4px 12px rgba(59, 125, 35, 0.22);
  --shadow-button: 0 1px 2px rgba(10, 10, 10, 0.10);

  /* ── Motion ── */
  --motion-fast:   120ms;
  --motion-base:   180ms;
  --motion-slow:   280ms;
  --ease-out:      ease-out;
  --ease-standard: cubic-bezier(0.2, 0.7, 0.3, 1);

  /* ===== ACCENT — operator chrome (dashboard + NEXT) ONLY ===== */
  /* Published sites keep their own brand accent; do not consume these there. */
  --color-accent:             #3b7d23;
  --color-accent-hover:       #347019;
  --color-accent-active:      #2a5d15;
  --color-accent-text:        #2f6a1c;
  --color-accent-tint:        #eef3ea;
  --color-accent-tint-strong: #e2ecd9;
  --color-accent-tint-border: #d3e3c6;
  --color-accent-disabled:    #c2d3b7;

  /* ── Focus (accent-derived) ── */
  --color-focus-ring:   rgba(59, 125, 35, 0.12);
  --focus-ring-width:   3px;
  --focus-border-color: #3b7d23;
  --focus-border-width: 1.5px;
}