/* ═══════════════════════════════════════════════════════════
   SKIPPER DESIGN TOKENS
   Single source of truth for color, space, radius, and type.
   Dark is the default brand mode; light mode overrides the same
   custom properties under prefers-color-scheme.
   The org accent is set at runtime from organizations.primary_color
   (js/boot.js) — everything accent-colored derives from --accent.
   ═══════════════════════════════════════════════════════════ */
:root{
  /* ── Accent (per-org) ── */
  --accent:#F5A623;
  --accent-dim:color-mix(in srgb, var(--accent) 13%, transparent);
  --accent-border:color-mix(in srgb, var(--accent) 32%, transparent);
  --accent-strong:color-mix(in srgb, var(--accent) 85%, black);
  --accent-text:var(--accent);        /* readable accent for text on surfaces */
  --on-accent:#141414;                /* text on accent-filled elements */

  /* ── Surfaces ── */
  --bg:#0B0B0D;
  --surface-1:#141416;
  --surface-2:#1E1E21;
  --surface-3:#29292D;
  --overlay:rgba(0,0,0,.6);
  --border:#26262A;
  --border-strong:#3A3A40;

  /* ── Text ── */
  --text-1:#F4F4F5;
  --text-2:#A6A6AE;
  --text-3:#6E6E76;

  /* ── Semantic ── */
  --success:#2FBF63;
  --success-dim:rgba(47,191,99,.12);
  --success-border:rgba(47,191,99,.3);
  --danger:#EF4444;
  --danger-dim:rgba(239,68,68,.12);
  --danger-border:rgba(239,68,68,.3);
  --info:#3B82F6;
  --info-dim:rgba(59,130,246,.12);
  --info-border:rgba(59,130,246,.3);

  /* ── Spacing ── */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px;
  --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:48px;

  /* ── Radius ── */
  --r-sm:6px; --r-md:10px; --r-lg:14px; --r-full:999px;

  /* ── Type ── */
  --font-display:'Bebas Neue',sans-serif;   /* brand display: logo + page titles only */
  --font-ui:'DM Sans',system-ui,sans-serif;
  --fs-xs:11px; --fs-sm:13px; --fs-md:15px; --fs-lg:17px;
  --fs-xl:22px; --fs-2xl:28px; --fs-display:38px;

  /* ── Elevation ── */
  --shadow-1:0 1px 2px rgba(0,0,0,.4);
  --shadow-2:0 8px 28px rgba(0,0,0,.5);

  /* ── Layout ── */
  --content-max:1040px;
  --topbar-h:56px;
  --tabbar-h:60px;
  --sidebar-w:216px;

  color-scheme:dark;
}

@media (prefers-color-scheme: light){
  :root{
    --accent-text:color-mix(in srgb, var(--accent) 62%, black);
    --on-accent:#141414;

    --bg:#F6F6F4;
    --surface-1:#FFFFFF;
    --surface-2:#F0F0EE;
    --surface-3:#E6E6E3;
    --overlay:rgba(20,20,22,.45);
    --border:#E2E2DF;
    --border-strong:#C9C9C5;

    --text-1:#1B1B1F;
    --text-2:#5A5A62;
    --text-3:#8A8A92;

    --success:#178A45;
    --success-dim:rgba(23,138,69,.1);
    --success-border:rgba(23,138,69,.28);
    --danger:#D42B2B;
    --danger-dim:rgba(212,43,43,.08);
    --danger-border:rgba(212,43,43,.26);
    --info:#2563EB;
    --info-dim:rgba(37,99,235,.08);
    --info-border:rgba(37,99,235,.26);

    --shadow-1:0 1px 2px rgba(20,20,22,.08);
    --shadow-2:0 8px 28px rgba(20,20,22,.16);

    color-scheme:light;
  }
}

/* ── Compatibility aliases (migration only — remove once no references remain) ── */
:root{
  --gold:var(--accent);
  --gold-dim:var(--accent-dim);
  --gold-border:var(--accent-border);
  --s1:var(--surface-1);
  --s2:var(--surface-2);
  --s3:var(--surface-3);
  --white:var(--text-1);
  --gray:var(--text-2);
  --gray2:var(--text-3);
  --green:var(--success);
  --green-dim:var(--success-dim);
  --green-border:var(--success-border);
  --red:var(--danger);
  --red-dim:var(--danger-dim);
  --red-border:var(--danger-border);
  --blue:var(--info);
  --blue-dim:var(--info-dim);
}