/* =====================================================================
   Hive — design tokens. The single source of every colour, size, radius,
   shadow and duration in the platform and in the DSM page (dsm.html).
   Change a value here and both change.

   Two layers:
     1. primitives  — the raw palette (--honey-500, --char-900 …). Never
                      used directly in components.
     2. semantic    — what a value is FOR (--bg, --ink, --primary …).
                      Components use only these.
   ===================================================================== */
:root{
  /* ---------- primitives: honey ---------- */
  /* built around the logo colour, #ECAE43 = 500 (measured from brand/source-hive-logo.jpeg) */
  --honey-50:#FDF8EC;  --honey-100:#FBEDCB; --honey-200:#F7DC9C; --honey-300:#F2CA6E;
  --honey-400:#EFBC56; --honey-500:#ECAE43; --honey-600:#CF901E; --honey-700:#A26F10;
  --honey-800:#76500B; --honey-900:#4A3207;

  /* ---------- primitives: char (warm black) ---------- */
  --char-0:#FFFFFF;    --char-25:#FCFAF6;  --char-50:#F7F4EE;  --char-100:#EFEAE0;
  --char-200:#E3DCCD;  --char-300:#CFC6B3; --char-400:#A89F8C; --char-500:#6F6858;
  --char-600:#5F584C;  --char-700:#403B33; --char-800:#28251F; --char-900:#161410;

  /* ---------- primitives: signal colours (statuses only) ---------- */
  --blue-50:#EAF1FD;   --blue-700:#1F57C3;
  --violet-50:#F2EDFC; --violet-700:#6A3FC8;
  --green-50:#E7F5EE;  --green-700:#16794A;
  --red-50:#FDEEEC;    --red-700:#B42318;

  /* ---------- semantic: surfaces & text ---------- */
  --bg:var(--char-50);            /* the page behind everything */
  --surface:var(--char-0);        /* cards, panels, modals */
  --surface-2:var(--char-25);     /* hover on a surface */
  --sunken:var(--char-100);       /* wells, segmented controls, the viewer stage */
  --line:var(--char-200);         /* hairlines */
  --line-2:var(--char-300);       /* input borders, stronger dividers */
  --ink:var(--char-900);          /* primary text — 16.8:1 on --bg */
  --ink-2:var(--char-600);        /* secondary text — 6.4:1 on --bg */
  --ink-3:var(--char-500);        /* tertiary, metadata — 5.0:1 on --bg, 4.6:1 on --sunken */
  --on-dark:var(--char-50);       /* text on --char-900 */

  /* ---------- semantic: brand & action ---------- */
  --primary:var(--char-900);      /* the one main action per screen: black */
  --primary-hover:var(--char-700);
  --on-primary:var(--char-0);
  --brand:var(--honey-500);       /* logo, pins, the "new" signal, focus */
  --brand-hover:var(--honey-600);
  --on-brand:var(--char-900);     /* text on honey is always black: 9.4:1. White is 2.0:1 and fails */
  --brand-soft:var(--honey-100);
  --brand-ink:var(--honey-800);   /* honey-toned text on light surfaces — 7.2:1 on white */
  --focus:var(--honey-700);       /* 4.36:1 on white (needs 3 for UI); plain honey-500 is 2.0:1, too faint */

  /* ---------- semantic: comments ---------- */
  --pin:var(--honey-500);         /* a comment pin */
  --pin-ink:var(--char-900);      /* its number */
  --pin-selected:var(--char-900);
  --pin-closed:var(--char-400);
  --pin-soft:var(--honey-100);

  /* ---------- semantic: statuses ---------- */
  --st-new-bg:var(--honey-100);      --st-new-ink:var(--honey-800);
  --st-progress-bg:var(--blue-50);   --st-progress-ink:var(--blue-700);
  --st-question-bg:var(--violet-50); --st-question-ink:var(--violet-700);
  --st-done-bg:var(--green-50);      --st-done-ink:var(--green-700);
  --st-rejected-bg:var(--char-100);  --st-rejected-ink:var(--char-600);
  --danger:var(--red-700);           --danger-bg:var(--red-50);

  /* ---------- type ---------- */
  --font:"Heebo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  --fs-12:12px; --fs-13:13px; --fs-14:14px; --fs-16:16px; --fs-18:18px;
  --fs-22:22px; --fs-28:28px; --fs-36:36px;
  --lh-tight:1.2; --lh-body:1.5;
  --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; --fw-black:800;

  /* ---------- space (4px grid) ---------- */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px;
  --sp-8:32px; --sp-10:40px; --sp-14:56px;

  /* ---------- radius ---------- */
  --r-xs:4px; --r-sm:8px; --r:12px; --r-lg:16px; --r-pill:999px;

  /* ---------- elevation ---------- */
  --sh-1:0 1px 2px rgba(22,20,16,.06),0 1px 1px rgba(22,20,16,.04);
  --sh-2:0 8px 28px rgba(22,20,16,.12),0 2px 6px rgba(22,20,16,.06);
  --sh-3:0 16px 48px rgba(22,20,16,.18),0 4px 12px rgba(22,20,16,.08);

  /* ---------- motion ---------- */
  --dur-fast:120ms; --dur:200ms; --ease:cubic-bezier(.2,.7,.2,1);

  /* ---------- control sizes ---------- */
  --h-sm:30px; --h:36px; --h-lg:44px;

  /* ---------- aliases kept for the platform's existing CSS ---------- */
  --accent:var(--primary); --accent-ink:var(--primary-hover); --accent-soft:var(--brand-soft);
  --ok:var(--green-700); --ok-soft:var(--green-50); --warn:var(--honey-800); --warn-soft:var(--honey-100);
  --q:var(--violet-700); --q-soft:var(--violet-50); --muted-soft:var(--char-100);
}