/* Elkiya brand tokens and base elements, shared by the mockup and the backlog board (same values as code by aqeel). */
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:200 800;font-display:swap;src:url('/assets/plus-jakarta-sans.woff2') format('woff2')}
:root{--bg:#fff;--surface:#fff;--soft:#edeef2;--soft-2:#f5f6f8;--blue-soft:#e8f0fe;--ink:#0b0c10;--ink-2:#2e3038;--muted:#646875;--border:#e2e3e9;--blue:#0158cb;--blue-2:#2f7bff;--blue-deep:#0a3f8f;--sky-1:#cfe1fb;--sky-2:#eaf2ff;--ok:#1f6b3a;--warn:#a15c00;--bad:#c62f2f;
 --r-sm:8px;--r-md:12px;--r-card:24px;--r-pill:9999px;
 --shadow-card:0 1px 2px rgba(11,12,16,.04),0 12px 40px -24px rgba(11,12,16,.18);--shadow-float:0 30px 80px -30px rgba(11,12,16,.35),0 2px 6px rgba(11,12,16,.08);--shadow-btn:0 1px 2px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.25);
 --ease:cubic-bezier(.2,.7,.2,1);--t-fast:160ms;--t-med:240ms;
 --mono:ui-monospace,"SF Mono",Consolas,monospace;
 font-family:'Plus Jakarta Sans',system-ui,sans-serif;color:var(--ink);font-size:15px;color-scheme:light;-webkit-font-smoothing:antialiased}
:root.dark{--bg:#12151c;--surface:#171c25;--soft:#1d2430;--soft-2:#121722;--blue-soft:#1b3153;--ink:#f0f3fa;--ink-2:#c2c9d5;--muted:#a1adbf;--border:#303a4b;--blue:#6ca9ff;--blue-2:#8fbcff;--blue-deep:#4a8eef;--sky-1:#1b2b45;--sky-2:#171c25;--ok:#5fd38d;--warn:#f0b35a;--bad:#ff8a8a;--shadow-card:0 1px 2px rgba(0,0,0,.3),0 12px 40px -24px rgba(0,0,0,.6);--shadow-float:0 30px 80px -30px rgba(0,0,0,.7),0 2px 6px rgba(0,0,0,.3);color-scheme:dark}
*{box-sizing:border-box}
body{margin:0;background:var(--soft-2);color:var(--ink)}
button,input,select,textarea{font:inherit;color:inherit}
button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:10px 18px;border:1px solid var(--border);border-radius:var(--r-pill);background:var(--surface);font-size:14px;font-weight:500;line-height:1;cursor:pointer;white-space:nowrap;box-shadow:0 1px 2px rgba(11,12,16,.05);transition:transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),border-color var(--t-fast),background var(--t-fast),color var(--t-fast)}
button:hover{transform:translateY(-1px);box-shadow:0 8px 20px -10px rgba(11,12,16,.3);border-color:#d2d4dc}
.dark button:hover{border-color:#43506a}
button.primary{background:linear-gradient(180deg,var(--blue-2) 0%,var(--blue) 100%);color:#fff;border-color:transparent;box-shadow:var(--shadow-btn),0 8px 24px -10px rgba(1,88,203,.6)}
.dark button.primary{color:#0b0c10}
button.ghost{background:transparent;border-color:transparent;box-shadow:none}
button.ghost:hover{background:var(--soft);transform:none;box-shadow:none}
button.icon{width:36px;min-height:36px;padding:0}
button:disabled{opacity:.55;cursor:default;transform:none}
input,select,textarea{width:100%;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);padding:10px 14px;font-size:14px;transition:border-color var(--t-fast),box-shadow var(--t-fast)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(1,88,203,.18)}
:focus-visible{outline:3px solid var(--blue-2);outline-offset:2px}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none}
a{color:var(--blue);font-weight:500;text-decoration:none}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:500;color:var(--ink-2);background:var(--soft);border:1px solid var(--border);border-radius:var(--r-pill);padding:5px 12px}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--blue)}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);box-shadow:var(--shadow-card)}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:500;color:var(--ink-2);background:var(--soft);border:1px solid var(--border);border-radius:var(--r-pill);padding:3px 10px;white-space:nowrap}
.chip.blue{background:var(--blue-soft);color:var(--blue-deep);border-color:transparent}
.dark .chip.blue{color:var(--blue-2)}
.chip.ok{color:var(--ok)}.chip.warn{color:var(--warn)}.chip.bad{color:var(--bad)}
.dot{width:8px;height:8px;border-radius:50%;background:currentColor;display:inline-block;flex:none}
.th{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.mark{width:24px;height:24px;flex:none}
.dark .mark{filter:invert(1)}
.wordmark{display:inline-flex;align-items:center;gap:10px;font-size:19px;font-weight:600;letter-spacing:-.7px;color:var(--ink)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}