/* ============================================================================
   FloridaE2 / Didier A. Renard — shared design tokens (SYNCED COPY — do not
   hand-edit here; copied from /assets/tokens.css for .biz's standalone deploy,
   since a Netlify-hosted .biz site root can't reach ../../assets the way a
   local repo-relative path could. Re-run
   `cp assets/tokens.css sites/florida_biz/tokens.css` if the canonical file
   changes. 2026-06-20.)
   Observatory-derived palette. Single source for back office + both sites + tools.
   Model: HYBRID — dark walnut/brass "chrome" (nav, headers), light cream/ink
   "content" (forms, tables, listings). Contrast verified (WCAG):
     cream on walnut 15.8 AAA · brass on walnut 7.9 AAA · ink on cream 12.2 AAA
     brass-lo on cream 5.2 AA (links) · walnut on cream 15.8 AAA (headings)
   RULE: never use plain --brass for TEXT on light (brass-on-cream = 2.0, FAIL).
         Use --link / --accent-strong (brass-lo) or --heading (walnut) instead.
   ============================================================================ */

:root {
  /* ── base palette (from the Observatory) ───────────────────────────── */
  --walnut:#171210;  --walnut-2:#221a16;          /* dark surfaces */
  --brass:#c9a35e;   --brass-hi:#ecd9a8;  --brass-lo:#7a5c30;
  --cream:#f4ecd8;   --paper:#fbf7ee;     --white:#ffffff;
  --ink:#2b2a26;     --ink-soft:#5b554c;
  --verdigris:#3e7a6e;

  /* ── status (chosen for legibility on light) ───────────────────────── */
  --ok:#3e7a6e;      /* ELIGIBLE   — verdigris   */
  --warn:#9a6b1f;    /* CONDITIONAL— dark amber  */
  --bad:#9b3b2f;     /* REJECTED   — muted brick */
  --muted:#8a8175;   /* GONE/neutral             */

  /* ── CHROME (dark) — nav bars, headers, sidebar ────────────────────── */
  --chrome-bg:var(--walnut);
  --chrome-bg-2:var(--walnut-2);
  --chrome-text:var(--cream);          /* body text on dark   */
  --chrome-text-muted:#c9bfa8;
  --chrome-accent:var(--brass);        /* accents/active on dark */
  --chrome-border:#3a2e25;

  /* ── CONTENT (light) — where you actually work ─────────────────────── */
  --bg:var(--paper);                   /* page background       */
  --surface:var(--white);              /* cards, tables         */
  --surface-2:var(--cream);            /* tinted panels         */
  --text:var(--ink);
  --text-muted:var(--ink-soft);
  --heading:var(--walnut);
  --link:var(--brass-lo);              /* readable brass for links */
  --accent:var(--brass);               /* fills/underlines/icons (behind dark text) */
  --accent-strong:var(--brass-lo);     /* accent TEXT on light  */
  --border:#e3d9c3;

  /* ── type / shape / depth ──────────────────────────────────────────── */
  --font-ui:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-display:"Marcellus","Old Standard TT",Georgia,serif;  /* headings/brand only */
  --font-data:"Courier Prime",ui-monospace,SFMono-Regular,Menlo,monospace; /* numerals/data */
  --radius:10px; --radius-lg:16px;
  --shadow:0 6px 20px rgba(23,18,16,.08);
  --shadow-chrome:0 2px 12px rgba(0,0,0,.35);
}

/* ── base ─────────────────────────────────────────────────────────────── */
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-ui);line-height:1.5;-webkit-font-smoothing:antialiased;}
h1,h2,h3,h4{font-family:var(--font-display);color:var(--heading);font-weight:600;letter-spacing:.01em;margin:0 0 .4em;}
a{color:var(--link);text-decoration:none;} a:hover{text-decoration:underline;}
.num{font-family:var(--font-data);}

/* ── chrome: top bar + sidebar ───────────────────────────────────────── */
.chrome{background:var(--chrome-bg);color:var(--chrome-text);box-shadow:var(--shadow-chrome);}
.chrome a{color:var(--chrome-text);}
.chrome .brand{font-family:var(--font-display);color:var(--chrome-text);font-size:18px;}
.chrome .brand .dot{color:var(--chrome-accent);}
.chrome .navlink{color:var(--chrome-text-muted);padding:8px 12px;border-radius:8px;}
.chrome .navlink:hover{color:var(--chrome-text);background:var(--chrome-bg-2);text-decoration:none;}
.chrome .navlink.active{color:var(--walnut);background:var(--chrome-accent);}

/* ── content surfaces ────────────────────────────────────────────────── */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px;}
.panel{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);padding:16px;}
.eyebrow{font-family:var(--font-ui);text-transform:uppercase;letter-spacing:.12em;font-size:11px;font-weight:700;color:var(--accent-strong);}

/* ── tables (data-dense; legibility first) ───────────────────────────── */
table.data{width:100%;border-collapse:collapse;background:var(--surface);font-size:14px;}
table.data th{text-align:left;font-family:var(--font-ui);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);
  border-bottom:2px solid var(--border);padding:10px 12px;}
table.data td{padding:10px 12px;border-bottom:1px solid var(--border);color:var(--text);}
table.data tr:hover td{background:var(--surface-2);}

/* ── E-2 status badges ───────────────────────────────────────────────── */
.badge{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.04em;padding:3px 9px;border-radius:999px;color:var(--white);}
.badge--eligible{background:var(--ok);}
.badge--conditional{background:var(--warn);}
.badge--rejected{background:var(--bad);}
.badge--gone{background:var(--muted);}

/* ── buttons / inputs ────────────────────────────────────────────────── */
.btn{font-family:var(--font-ui);font-weight:600;font-size:14px;border-radius:8px;padding:9px 16px;border:1px solid transparent;cursor:pointer;}
.btn--primary{background:var(--accent);color:var(--walnut);}        /* dark text on brass = readable */
.btn--primary:hover{background:var(--brass-hi);}
.btn--ghost{background:transparent;color:var(--accent-strong);border-color:var(--border);}
.btn--ghost:hover{background:var(--surface-2);}
label{font-size:13px;color:var(--text-muted);font-weight:600;}
input,select,textarea{font-family:var(--font-ui);font-size:14px;color:var(--text);background:var(--white);
  border:1px solid var(--border);border-radius:8px;padding:9px 11px;}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:0;border-color:var(--accent);}
