/*
 * ═══════════════════════════════════════════════════════════════════
 *  SWIMLANES PLATFORM — Shared Design Tokens
 *  app/static/css/platform.css
 *
 *  CROSS-REFERENCE: These variables are mirrored in:
 *    app/templates/dashboard/editor.html  (search: @platform-tokens)
 *
 *  RULE: If you change a variable here, update the matching block
 *  in editor.html as well (and vice versa). Both files reference
 *  each other so Claude and developers know to keep them in sync.
 *
 *  Included by: base.html (all platform pages)
 *  NOT included by: editor.html standalone (it carries its own copy
 *  for portability — see @platform-tokens comment in that file)
 * ═══════════════════════════════════════════════════════════════════
 */


/* ── Default theme (Dark / Slate) ──────────────────────────────── */
:root {
  --bg:#0f172a;           /* slate-900 */
  --panel:#111827;        /* gray-900  */
  --muted:#1f2937;        /* gray-800  */
  --card:#0b1220;         /* deep card */
  --accent:#22d3ee;       /* cyan-400  */
  --accent-2:#60a5fa;     /* blue-400  */
  --text:#e5e7eb;         /* gray-200  */
  --text-dim:#94a3b8;     /* slate-400 */
  --ok:#3b82f6;           /* blue-500  */
  --warn:#f59e0b;         /* amber-500 */
  --danger:#ef4444;       /* red-500   */
  --radius:16px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --grid-border:#1f2937;
  --input-border:#243042;
  --btn-border:#243042;
  --header-bg1:rgba(17,24,39,.9);
  --header-bg2:rgba(17,24,39,.65);
  --page-grad1:#0b1220;
  --page-grad2:#0f172a;
  --page-grad3:#0a0f1f;
}

/* ── Light theme ────────────────────────────────────────────────── */
body.theme-light {
  --bg:#f5f7fb;
  --panel:#ffffff;
  --muted:#eef2ff;
  --card:#ffffff;
  --accent:#2563eb;
  --accent-2:#7c3aed;
  --text:#0b1220;
  --text-dim:#475569;
  --ok:#2563eb;
  --warn:#b45309;
  --danger:#b91c1c;
  --shadow:0 10px 24px rgba(15,23,42,.10);
  --grid-border:#cbd5e1;
  --input-border:#cbd5e1;
  --btn-border:#94a3b8;
  --header-bg1:rgba(255,255,255,.92);
  --header-bg2:rgba(255,255,255,.75);
  --page-grad1:#f5f7fb;
  --page-grad2:#eef2ff;
  --page-grad3:#ffffff;
}

/* ── Butcher Paper theme ────────────────────────────────────────── */
body.theme-butcher {
  --bg:#f9f6f0;
  --panel:#fdfcfa;
  --muted:#f2ede4;
  --card:#fefefe;
  --accent:#7c4a1e;
  --accent-2:#5a3a1a;
  --text:#2c1a0e;
  --text-dim:#7a6050;
  --ok:#3d6fa6;
  --warn:#c47a1a;
  --danger:#b03a2e;
  --radius:16px;
  --shadow:1px 2px 6px rgba(80,40,10,.12), 0 1px 2px rgba(80,40,10,.07);
  --grid-border:#d8c9b0;
  --input-border:#cbbda4;
  --btn-border:#c4aa88;
  --header-bg1:rgba(253,252,250,.98);
  --header-bg2:rgba(251,248,242,.92);
  --page-grad1:#f9f6f0;
  --page-grad2:#f4efe6;
  --page-grad3:#f0ebe0;
}

/* ── Post-it palette ────────────────────────────────────────────── */
:root {
  --postit-yellow: #fef08a;   /* sticky yellow */
  --postit-pink:   #fbcfe8;   /* soft pink     */
  --postit-blue:   #bae6fd;   /* sky blue      */
  --postit-orange: #fed7aa;   /* peach/orange  */
  --postit-purple: #e9d5ff;   /* lavender      */
  --postit-green:  #bbf7d0;   /* mint green    */
  --postit-white:  #ffffff;   /* plain         */
}

/* ── Nav variables ──────────────────────────────────────────────── */
:root {
  --nav-bg:#0f1e38;
  --nav-border:#1e3050;
  --nav-accent:#22d3ee;
  --nav-text:#94a3b8;
  --nav-hover:rgba(255,255,255,.06);
  --border:#2d3f60;
}

/* ── iOS safe area insets ───────────────────────────────────────── */
:root {
  --sat: env(safe-area-inset-top,    0px);
  --sar: env(safe-area-inset-right,  0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left,   0px);
}