/* fullstackpartner.com designs. Tokens come from the DESIGN.md files in
   /opt/awesome-design-md (VoltAgent/awesome-design-md). Only colours, fonts,
   corners and heading style change; content and layout stay the same. */

/* ---- The switcher in the upper right corner ---- */
.dsw{position:relative;font-family:inherit}
.dsw-float{position:fixed;top:12px;right:12px;z-index:50}
.dsw-btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--card);color:var(--ink);font:600 13px/1 inherit;font-family:inherit;padding:6px 12px 6px 6px;border-radius:999px;cursor:pointer}
.dsw-btn:hover{border-color:var(--ink2)}
.dsw-cur,.dsw-opt i{display:inline-block;width:22px;height:22px;border-radius:50%;border:1px solid rgba(128,128,128,.35);flex:none}
.dsw-pop{position:absolute;right:0;top:calc(100% + 8px);width:300px;max-height:min(70vh,560px);overflow:auto;background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 50px rgba(0,0,0,.22);padding:14px;z-index:60;text-align:left}
.dsw-pop>b{display:block;font-size:15px}
.dsw-pop>p{margin:2px 0 10px;font-size:13px;color:var(--ink2);line-height:1.4}
.dsw-list{display:grid;gap:4px}
.dsw-opt{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:1px solid transparent;background:transparent;color:var(--ink);font:600 14px/1.25 inherit;font-family:inherit;padding:7px 8px;border-radius:10px;cursor:pointer}
.dsw-opt i{width:28px;height:28px}
.dsw-opt small{display:block;font-weight:400;font-size:12px;color:var(--ink2)}
.dsw-opt:hover{background:var(--bg2)}
.dsw-opt[aria-checked="true"]{border-color:var(--accent);background:var(--accent-soft)}
.dsw-more{display:block;margin-top:10px;font-size:13px;font-weight:600;color:var(--accent);text-decoration:none}
@media (max-width:620px){.dsw-btn span{display:none}.dsw-btn{padding:5px}.dsw-pop{position:fixed;left:12px;right:12px;top:64px;width:auto}}

/* Previews start clean, then take their own design's tokens */
.dpv{--d-font:Inter,system-ui,sans-serif;--d-head:initial;--d-hw:700;--d-hls:-.03em;--d-case:none;--d-rb:10px;--d-rc:14px}
.dpv[data-design="default"]{--bg:#ffffff;--bg2:#f5f6f8;--card:#ffffff;--ink:#0f1720;--ink2:#4a5562;--line:#e3e6ea;--accent:#2f5bea;--accent-ink:#fff;--accent-soft:#e8eefe;--live:#127a3f;--live-soft:#e3f4ea;--shadow:0 1px 2px rgba(15,23,32,.06),0 4px 16px rgba(15,23,32,.06)}

/* ---- Shared hooks: every design fills these variables ---- */
html[data-design] body{font-family:var(--d-font)}
html[data-design] button,html[data-design] input,html[data-design] textarea,html[data-design] select,
html[data-design] .lang button,html[data-design] .filters button,html[data-design] .open button.copy{font-family:var(--d-font)}
html[data-design] h1,html[data-design] h2,html[data-design] h3,html[data-design] .brand,html[data-design] .stat b{font-family:var(--d-head,var(--d-font));font-weight:var(--d-hw,700);letter-spacing:var(--d-hls,-.03em);text-transform:var(--d-case,none)}
html[data-design] .btn,html[data-design] .open a,html[data-design] .open button.copy,html[data-design] .filters button{border-radius:var(--d-rb,10px)}
html[data-design] .card,html[data-design] .svc,html[data-design] .price,html[data-design] .rbox,html[data-design] .step,html[data-design] .incl li,html[data-design] .mrow img,html[data-design] .tour .media{border-radius:var(--d-rc,14px)}
html[data-design][data-theme="dark"] .mzone{--mosaic:.2}
html[data-design][data-theme="dark"] section.mzone{--mosaic:.14}
html[data-design][data-theme="light"] .mzone{--mosaic:.32}

/* Stripe: deep navy ink, electric indigo, thin display type, tight corners */
html[data-design="stripe"],.dpv[data-design="stripe"]{--bg:#ffffff;--bg2:#f6f9fc;--card:#ffffff;--ink:#0d253d;--ink2:#64748d;--line:#e3e8ee;--accent:#533afd;--accent-ink:#fff;--accent-soft:#eeedff;--live:#0e7a4f;--live-soft:#dcf5ea;--demo:#9b6829;--demo-soft:#f5e9d4;--shadow:0 2px 5px rgba(0,55,112,.08),0 13px 27px -5px rgba(50,50,93,.12);
  --d-font:Inter,system-ui,sans-serif;--d-hw:300;--d-hls:-.035em;--d-rb:6px;--d-rc:8px}
html[data-design="stripe"] .hero{background:radial-gradient(60% 80% at 85% 0%,#f96bee33,transparent 60%),radial-gradient(50% 70% at 60% 0%,#533afd2e,transparent 60%)}

/* Linear: near-black canvas, lavender accent, crisp hairlines */
html[data-design="linear"],.dpv[data-design="linear"]{--bg:#010102;--bg2:#0f1011;--card:#141516;--ink:#f7f8f8;--ink2:#8a8f98;--line:#23252a;--accent:#5e6ad2;--accent-ink:#fff;--accent-soft:#1b1d36;--live:#4cb782;--live-soft:#10261b;--demo:#f2c94c;--demo-soft:#2b2410;--shadow:none;
  --d-font:Inter,system-ui,sans-serif;--d-hw:600;--d-hls:-.045em;--d-rb:8px;--d-rc:12px}

/* Vercel: black and white, Geist, blue only for links */
html[data-design="vercel"],.dpv[data-design="vercel"]{--bg:#ffffff;--bg2:#fafafa;--card:#ffffff;--ink:#171717;--ink2:#4d4d4d;--line:#ebebeb;--accent:#171717;--accent-ink:#fff;--accent-soft:#f2f2f2;--live:#0070f3;--live-soft:#d3e5ff;--demo:#a35200;--demo-soft:#fff1de;--shadow:0 0 0 1px rgba(0,0,0,.06),0 2px 4px rgba(0,0,0,.04);
  --d-font:Geist,Inter,system-ui,sans-serif;--d-hw:600;--d-hls:-.05em;--d-rb:6px;--d-rc:12px}
html[data-design="vercel"] a{color:#0070f3}
html[data-design="vercel"] .btn.primary{color:#fff}

/* Apple: parchment grey, one near-black ink, blue links, pill buttons */
html[data-design="apple"],.dpv[data-design="apple"]{--bg:#ffffff;--bg2:#f5f5f7;--card:#ffffff;--ink:#1d1d1f;--ink2:#6e6e73;--line:#e0e0e0;--accent:#0066cc;--accent-ink:#fff;--accent-soft:#e8f1fb;--live:#1d7d3a;--live-soft:#e3f3e7;--demo:#9a5b00;--demo-soft:#fbf0dc;--shadow:0 4px 20px rgba(0,0,0,.06);
  --d-font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif;--d-head:-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",Helvetica,Arial,sans-serif;--d-hw:600;--d-hls:-.02em;--d-rb:980px;--d-rc:18px}

/* Notion: white pages, purple primary, friendly bold heads */
html[data-design="notion"],.dpv[data-design="notion"]{--bg:#ffffff;--bg2:#f6f5f4;--card:#ffffff;--ink:#191918;--ink2:#615d59;--line:#e9e9e7;--accent:#5645d4;--accent-ink:#fff;--accent-soft:#efecfd;--live:#1a7f4b;--live-soft:#e0f3e8;--demo:#dd5b00;--demo-soft:#fdeee2;--shadow:0 1px 3px rgba(0,0,0,.06),0 6px 18px rgba(0,0,0,.05);
  --d-font:Inter,system-ui,sans-serif;--d-hw:800;--d-hls:-.04em;--d-rb:8px;--d-rc:12px}

/* Claude: warm cream canvas, terracotta, serif headlines */
html[data-design="claude"],.dpv[data-design="claude"]{--bg:#faf9f5;--bg2:#f5f0e8;--card:#fffdf8;--ink:#141413;--ink2:#6c6a64;--line:#e6dfd8;--accent:#cc785c;--accent-ink:#fff;--accent-soft:#f6e6de;--live:#4f7a3a;--live-soft:#e7efdc;--demo:#a9583e;--demo-soft:#f5e3d8;--shadow:0 1px 2px rgba(20,20,19,.05);
  --d-font:Inter,system-ui,sans-serif;--d-head:"Source Serif 4",Georgia,serif;--d-hw:400;--d-hls:-.02em;--d-rb:8px;--d-rc:12px}

/* Airbnb: coral primary, soft rounded cards, generous shadows */
html[data-design="airbnb"],.dpv[data-design="airbnb"]{--bg:#ffffff;--bg2:#f7f7f7;--card:#ffffff;--ink:#222222;--ink2:#6a6a6a;--line:#dddddd;--accent:#ff385c;--accent-ink:#fff;--accent-soft:#ffe8ec;--live:#008a05;--live-soft:#e3f5e3;--demo:#c13515;--demo-soft:#fdeae4;--shadow:0 6px 16px rgba(0,0,0,.12);
  --d-font:"DM Sans",system-ui,sans-serif;--d-hw:700;--d-hls:-.02em;--d-rb:8px;--d-rc:20px}

/* Spotify: dark surfaces, green pill buttons */
html[data-design="spotify"],.dpv[data-design="spotify"]{--bg:#121212;--bg2:#181818;--card:#1f1f1f;--ink:#ffffff;--ink2:#b3b3b3;--line:#2a2a2a;--accent:#1ed760;--accent-ink:#000;--accent-soft:#16351f;--live:#1ed760;--live-soft:#16351f;--demo:#ffa42b;--demo-soft:#3a2a10;--shadow:none;
  --d-font:Figtree,system-ui,sans-serif;--d-hw:800;--d-hls:-.03em;--d-rb:999px;--d-rc:10px}

/* x.ai: pure black, white as the accent, light display weight */
html[data-design="xai"],.dpv[data-design="xai"]{--bg:#0a0a0a;--bg2:#121316;--card:#191919;--ink:#ffffff;--ink2:#7d8187;--line:#212327;--accent:#ffffff;--accent-ink:#0a0a0a;--accent-soft:#1f2024;--live:#9be8a8;--live-soft:#132317;--demo:#ff7a17;--demo-soft:#2e1a08;--shadow:none;
  --d-font:Inter,system-ui,sans-serif;--d-hw:300;--d-hls:-.05em;--d-rb:999px;--d-rc:8px}
html[data-design="xai"] .hero{background:radial-gradient(70% 60% at 80% 0%,#ff7a1724,transparent 60%),radial-gradient(60% 60% at 30% 0%,#7c3aed22,transparent 60%)}

/* Ferrari: dark carbon, rosso corsa, sharp corners, upper case heads */
html[data-design="ferrari"],.dpv[data-design="ferrari"]{--bg:#181818;--bg2:#202020;--card:#262626;--ink:#ffffff;--ink2:#969696;--line:#303030;--accent:#da291c;--accent-ink:#fff;--accent-soft:#3a1714;--live:#6fcf6f;--live-soft:#183018;--demo:#fff200;--demo-soft:#333010;--shadow:none;
  --d-font:Barlow,system-ui,sans-serif;--d-hw:600;--d-hls:.01em;--d-case:uppercase;--d-rb:2px;--d-rc:4px}

/* Tesla: white, one electric blue, small corners, quiet type */
html[data-design="tesla"],.dpv[data-design="tesla"]{--bg:#ffffff;--bg2:#f4f4f4;--card:#ffffff;--ink:#171a20;--ink2:#5c5e62;--line:#eeeeee;--accent:#3e6ae1;--accent-ink:#fff;--accent-soft:#eaf0fd;--live:#17803d;--live-soft:#e4f4ea;--demo:#8a5a00;--demo-soft:#fbf0d9;--shadow:none;
  --d-font:Inter,system-ui,sans-serif;--d-hw:500;--d-hls:-.02em;--d-rb:4px;--d-rc:4px}

/* Figma: black and white with pastel blocks */
html[data-design="figma"],.dpv[data-design="figma"]{--bg:#ffffff;--bg2:#f7f7f5;--card:#ffffff;--ink:#000000;--ink2:#555555;--line:#e6e6e6;--accent:#000000;--accent-ink:#fff;--accent-soft:#c5b0f4;--live:#1d6b33;--live-soft:#c8e6cd;--demo:#7a4a00;--demo-soft:#f4ecd6;--shadow:none;
  --d-font:Inter,system-ui,sans-serif;--d-hw:400;--d-hls:-.04em;--d-rb:50px;--d-rc:24px}
html[data-design="figma"] section.alt{background:#f4ecd6}
html[data-design="figma"] .eyebrow{color:#000}

/* Nike: heavy condensed upper case, black and white, sale red */
html[data-design="nike"],.dpv[data-design="nike"]{--bg:#ffffff;--bg2:#f5f5f5;--card:#ffffff;--ink:#111111;--ink2:#707072;--line:#e5e5e5;--accent:#111111;--accent-ink:#fff;--accent-soft:#f0f0f0;--live:#007d48;--live-soft:#e0f2e9;--demo:#d30005;--demo-soft:#fde3e3;--shadow:none;
  --d-font:Inter,"Helvetica Neue",Helvetica,Arial,sans-serif;--d-head:"Barlow Condensed","Arial Narrow",sans-serif;--d-hw:800;--d-hls:-.01em;--d-case:uppercase;--d-rb:30px;--d-rc:0px}
html[data-design="nike"] h1{line-height:.95}

/* Header room for the switcher (homepage header was already full) */
header.top nav.links a{white-space:nowrap}
@media (max-width:1380px){header.top nav.links{gap:14px}header.top .dsw-btn span{display:none}header.top .dsw-btn{padding:5px}}
@media (max-width:1180px){header.top nav.links{font-size:13px;gap:12px}}
@media (max-width:480px){
  header.top .tools{gap:8px}
  header.top .lang button{padding:5px 8px;font-size:12px}
  header.top .signin{font-size:13px}
  header.top .brand{font-size:16px}
}
/* Short language labels (EN / DA) when the header is tight */
@media (max-width:1180px){
  header.top .lang button[data-lang]{font-size:0;padding:6px 10px}
  header.top .lang button[data-lang]:after{content:attr(data-lang);font-size:12px;text-transform:uppercase;letter-spacing:.02em}
}
@media (max-width:380px){header.top .wrap{padding:0 12px}header.top .brand{font-size:15px}header.top .tools{gap:6px}header.top .lang button[data-lang]{padding:5px 8px}}