/* ============================================================= ÅRSTA — DELAT DESIGNSYSTEM (Fas 3, 2026-06-01) En kalla for utseendet. Anvands av mobil + admin. Tema = byte av design-tokens. Ljust default; morkt + accent valbart. Sätts via [data-theme] och [data-accent] pa (se theme.js). ============================================================= */ /* ---------- TEMA-TOKENS ---------- */ :root, [data-theme="light"]{ --bg:#FAF6EC; --surface:#FFFFFF; --surface-2:#F1ECDF; --surface-3:#E7E0CF; --text:#13201A; --text-2:#454F47; --text-3:#7A8379; --line:rgba(19,32,26,.10); --line-2:rgba(19,32,26,.16); --shadow:0 1px 2px rgba(19,32,26,.05),0 12px 30px -16px rgba(19,32,26,.28); --hero-bg:#13201A; --hero-text:#EAF3E6; --hero-2:#A9BBA8; --pill-todo-bg:#FBEFCF;--pill-todo-tx:#8a6210; --pill-now-bg:#DCEAF6;--pill-now-tx:#1c4f80; --pill-done-bg:#DBF1C4;--pill-done-tx:#3d5a14; --pill-inv-bg:#13201A;--pill-inv-tx:var(--accent-bright); --danger:#E2613A; --danger-soft:#FBE5DC; } [data-theme="dark"]{ --bg:#0B0E14; --surface:#181E29; --surface-2:#232B38; --surface-3:#2E3645; --text:#F7F9FC; --text-2:#BAC3D0; --text-3:#8B95A4; --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.18); --shadow:0 1px 2px rgba(0,0,0,.4),0 14px 34px -16px rgba(0,0,0,.7); --hero-bg:#0F1620; --hero-text:#F7F9FC; --hero-2:#8B95A4; --pill-todo-bg:rgba(255,208,110,.2);--pill-todo-tx:#FFDD8E; --pill-now-bg:rgba(123,184,255,.2);--pill-now-tx:#A6CEFF; --pill-done-bg:rgba(103,227,176,.2);--pill-done-tx:#8DECC4; --pill-inv-bg:var(--surface-3);--pill-inv-tx:var(--text-2); --danger:#FF7E52; --danger-soft:rgba(255,126,82,.16); } /* ---------- ACCENT-TOKENS (valbar) ---------- */ [data-accent="lime"] { --accent:#A6D028;--accent-bright:#C4ED3B;--accent-ink:#1B2410;--accent-soft:rgba(166,208,40,.16) } [data-accent="coral"] { --accent:#FF7E52;--accent-bright:#FF9A75;--accent-ink:#180A04;--accent-soft:rgba(255,126,82,.16) } [data-accent="sky"] { --accent:#3B82F6;--accent-bright:#6BA5FF;--accent-ink:#FFFFFF;--accent-soft:rgba(59,130,246,.16) } [data-accent="violet"]{ --accent:#8B5CF6;--accent-bright:#A98AFF;--accent-ink:#FFFFFF;--accent-soft:rgba(139,92,246,.16) } [data-accent="amber"] { --accent:#E8A317;--accent-bright:#FFC24B;--accent-ink:#2A1D00;--accent-soft:rgba(232,163,23,.16) } [data-accent="teal"] { --accent:#0FB5A6;--accent-bright:#3FD8C9;--accent-ink:#04211E;--accent-soft:rgba(15,181,166,.16) } /* default accent om inget satt */ :root:not([data-accent]){ --accent:#A6D028;--accent-bright:#C4ED3B;--accent-ink:#1B2410;--accent-soft:rgba(166,208,40,.16) } /* ---------- RADIE & SPACING ---------- */ :root{ --r-lg:24px; --r-md:16px; --r-sm:11px; --tap:46px; } /* ---------- BAS ---------- */ *{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent} body{font-family:'Hanken Grotesk',system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;transition:background .35s ease,color .35s ease} h1,h2,h3,.display{font-family:'Bricolage Grotesque','Hanken Grotesk',sans-serif;letter-spacing:-.02em} a{color:var(--accent);text-decoration:none} ::selection{background:var(--accent);color:var(--accent-ink)} /* ---------- KNAPPAR ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:none;cursor:pointer; border-radius:var(--r-md);padding:14px 18px;font-weight:700;font-size:15px;min-height:var(--tap); transition:transform .14s ease,background .3s ease,box-shadow .2s ease} .btn:active{transform:scale(.97)} .btn-primary{background:var(--accent);color:var(--accent-ink);box-shadow:0 12px 26px -12px var(--accent)} .btn-dark{background:var(--hero-bg);color:var(--accent-bright)} .btn-ghost{background:var(--surface-2);color:var(--text)} .btn-block{width:100%} .btn-lg{padding:18px 20px;font-size:17px;border-radius:var(--r-lg)} /* ---------- KORT ---------- */ .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow);transition:background .3s ease} .card-pad{padding:18px} .hero{background:var(--hero-bg);color:var(--hero-text);border-radius:var(--r-lg);padding:22px;position:relative;overflow:hidden;box-shadow:var(--shadow)} .hero::before{content:"";position:absolute;right:-40px;top:-40px;width:170px;height:170px;border-radius:50%;background:radial-gradient(circle at 30% 30%,var(--accent-soft),transparent 70%)} /* ---------- FÄLT ---------- */ .label{font-weight:700;font-size:13.5px;margin-bottom:8px;display:flex;align-items:center;gap:8px;color:var(--text)} .label .num{width:22px;height:22px;border-radius:7px;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font:800 11px/1 'Bricolage Grotesque'} .control{width:100%;background:var(--surface);border:1.5px solid var(--line-2);border-radius:var(--r-md); padding:15px 16px;font:600 16px/1.3 'Hanken Grotesk';color:var(--text);box-shadow:var(--shadow);appearance:none} .control::placeholder{color:var(--text-3)} .control:focus{outline:none;border-color:var(--accent)} textarea.control{resize:none;min-height:84px;line-height:1.45} /* ---------- STATUS-PILLAR ---------- */ .pill{font:700 11px/1 'Hanken Grotesk';padding:6px 10px;border-radius:999px;text-transform:uppercase;letter-spacing:.02em;display:inline-block} .pill-todo{background:var(--pill-todo-bg);color:var(--pill-todo-tx)} .pill-now{background:var(--pill-now-bg);color:var(--pill-now-tx)} .pill-done{background:var(--pill-done-bg);color:var(--pill-done-tx)} .pill-inv{background:var(--pill-inv-bg);color:var(--pill-inv-tx)} /* ---------- EWC-KOD ---------- */ .code{font:700 12px/1 'Bricolage Grotesque';background:var(--accent-soft);color:var(--accent);padding:5px 7px;border-radius:7px;display:inline-block} /* ---------- CHIPS ---------- */ .chip{border:1.5px solid var(--line-2);background:var(--surface);border-radius:var(--r-sm);padding:10px 13px; font-weight:600;font-size:13.5px;color:var(--text);cursor:pointer;display:inline-flex;gap:8px;align-items:center;box-shadow:var(--shadow)} .chip.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)} /* ---------- BOTTENNAV (mobil) ---------- */ .tabbar{position:fixed;left:14px;right:14px;bottom:14px;height:70px; background:color-mix(in srgb,var(--surface) 82%,transparent);backdrop-filter:blur(18px); border:1px solid var(--line);border-radius:var(--r-lg);display:flex;align-items:center;justify-content:space-around; padding:0 8px;box-shadow:var(--shadow);z-index:20} .tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;color:var(--text-3);padding:8px 0} .tab svg{stroke:currentColor}.tab .tl{font:700 10.5px/1 'Hanken Grotesk'} .tab.on{color:var(--text)} .tab-fab .fab{width:58px;height:58px;border-radius:19px;background:var(--accent);display:grid;place-items:center;margin-top:-26px;box-shadow:0 12px 22px -8px var(--accent)} .tab-fab .fab svg{stroke:var(--accent-ink)} /* ---------- HJÄLPARE ---------- */ .muted{color:var(--text-3)} .stack{display:flex;flex-direction:column} .row{display:flex;align-items:center} .gap-8{gap:8px}.gap-12{gap:12px} .toast{position:fixed;left:50%;bottom:102px;transform:translate(-50%,20px);background:var(--hero-bg);color:var(--hero-text); padding:13px 20px;border-radius:14px;font-weight:700;font-size:14px;box-shadow:var(--shadow);opacity:0;transition:.3s;z-index:45;pointer-events:none;white-space:nowrap} .toast.on{opacity:1;transform:translate(-50%,0)} /* tillgänglighet: synlig fokusring för tangentbord */ :focus-visible{outline:2.5px solid var(--accent);outline-offset:2px}