/*
 * Flock Design Tokens
 * Defines all CSS custom properties in both naming conventions so every
 * page can use whichever system it was written with, and any shared CSS
 * can reference either without breaking.
 *
 * Convention A (shorthand)  — used by org-page, event-page, course-page,
 *                             campaigns, donations, madrassah, announcements
 * Convention B (long-form)  — used by discover, index, admin
 *
 * Pages' own :root blocks override these with the same values, which is
 * harmless. The aliases for the missing convention are what matter.
 */

:root {
  /* ── BROWN SCALE ── */
  --br:            #3d2010;   /* short */
  --brown:         #3d2010;   /* long  */

  --bm:            #8b5e3c;
  --brown-mid:     #8b5e3c;

  --bl:            #c9956a;
  --brown-light:   #c9956a;

  /* ── SAND / CREAM SCALE ── */
  --sa:            #f5efe6;
  --sand:          #f5efe6;

  --sd:            #ede7dd;
  --sand-dark:     #ede7dd;

  --cr:            #fdf8f2;
  --cream:         #fdf8f2;

  /* ── GOLD ── */
  --go:            #c9a84c;
  --gold:          #c9a84c;

  --gl:            #e8c97a;
  --gold-light:    #e8c97a;

  /* ── NEUTRAL ── */
  --wh:            #ffffff;
  --white:         #ffffff;

  --bo:            #e8dfd4;
  --border:        #e8dfd4;

  /* ── SEMANTIC ── */
  --er:            #c0392b;
  --danger:        #c0392b;
  --danger-bg:     #fef2f2;

  --su:            #27ae60;
  --success:       #27ae60;
  --success-bg:    #eef7ee;

  /* ── ADMIN ── */
  --sidebar-w:     240px;

  /* ── SPACING SCALE ── */
  --sp-xs:         8px;
  --sp-sm:         12px;
  --sp-md:         16px;
  --sp-lg:         24px;
  --sp-xl:         32px;

  /* ── RADIUS SCALE ── */
  --r-sm:          8px;   /* buttons, inputs, small elements */
  --r-md:          10px;  /* primary CTA buttons */
  --r-lg:          14px;  /* content cards */
  --r-xl:          16px;  /* hero/image cards */

  /* ── FOCUS RING ── */
  --focus-ring:    0 0 0 3px rgba(61,32,16,.06);
}