/* Afda Cloud — shared theme. See DESIGN.md */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Manrope:wght@400;500;600;700&family=JetBrains+Mono:wght@500;600&display=swap');

:root{
  /* core */
  --ink:#0b1220; --navy:#13366b; --navy-700:#0f2a55;
  --blue:#2f6fed; --blue-400:#5b8cff; --sky:#e8f0ff;
  /* neutrals */
  --bg:#ffffff; --bg-soft:#f4f7fc; --line:#e4e9f2;
  --muted:#5a6b85; --muted-2:#8c9ab3;
  /* fixed surfaces that stay dark in BOTH themes */
  --side-bg:#0a1024; --header-bg:rgba(255,255,255,.86);
  /* dark */
  --d-bg:#070b16; --d-surface:#0f1830; --d-surface-2:#16203c;
  --d-line:#22304f; --d-text:#e7edf9; --d-muted:#8a9ab5;
  /* context */
  --c-team:#2f6fed; --c-private:#7c5cff;
  /* status */
  --ok:#10b981; --warn:#f4a51c; --danger:#ef4757;
  /* radius */
  --r-sm:8px; --r:14px; --r-lg:20px; --r-pill:999px;
  /* shadow */
  --sh-1:0 1px 2px rgba(13,30,60,.06);
  --sh-2:0 8px 24px rgba(13,30,60,.08);
  --sh-3:0 24px 60px rgba(13,30,60,.14);
  --glow:0 0 0 1px rgba(91,140,255,.4), 0 12px 40px rgba(47,111,237,.35);
  /* type */
  --font-display:'Space Grotesk',system-ui,sans-serif;
  --font-body:'Manrope',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;
  --maxw:1200px;
}

/* ---------- DARK MODE ---------- */
[data-theme="dark"]{
  --bg:#121c38;            /* card / raised surface */
  --bg-soft:#0a1022;       /* page background */
  --line:#243152;
  --ink:#e7edf9;           /* primary text (flips light) */
  --muted:#9fb0d0; --muted-2:#7587ad;
  --navy:#2f6fed; --navy-700:#2a62cf;   /* brighter so primary buttons pop on dark */
  --sky:rgba(47,111,237,.16);
  --header-bg:rgba(14,22,44,.82);
  --sh-1:0 1px 2px rgba(0,0,0,.4);
  --sh-2:0 10px 30px rgba(0,0,0,.45);
  --sh-3:0 24px 60px rgba(0,0,0,.55);
}
html{transition:background-color .25s ease;}
body{transition:background-color .25s ease, color .25s ease;}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0; font-family:var(--font-body); color:var(--ink);
  background:var(--bg); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{font-family:var(--font-display); margin:0; line-height:1.1; text-wrap:balance; letter-spacing:-.01em;}
p{margin:0; text-wrap:pretty;}
a{color:inherit; text-decoration:none;}
img{display:block; max-width:100%;}
button{font-family:inherit; cursor:pointer; border:none; background:none;}
input,select,textarea{font-family:inherit; font-size:inherit;}

/* layout */
.container{max-width:var(--maxw); margin:0 auto; padding:0 24px;}
@media(max-width:640px){.container{padding:0 16px;}}

/* eyebrow */
.eyebrow{font-family:var(--font-mono); font-weight:600; font-size:12px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--blue);}
.chip{display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono);
  font-weight:600; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase;
  background:var(--sky); color:var(--navy); padding:7px 12px; border-radius:var(--r-pill);}

/* buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-weight:600; font-size:15px; padding:12px 20px; border-radius:var(--r);
  transition:.18s ease; white-space:nowrap; border:1px solid transparent;}
.btn svg{width:18px; height:18px;}
.btn-primary{background:var(--navy); color:#fff;}
.btn-primary:hover{background:var(--navy-700); transform:translateY(-1px); box-shadow:var(--sh-2);}
.btn-accent{background:var(--blue); color:#fff;}
.btn-accent:hover{background:#1f5bd6; transform:translateY(-1px); box-shadow:var(--sh-2);}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line);}
.btn-ghost:hover{background:var(--bg-soft); border-color:var(--muted-2);}
.btn-lg{padding:15px 26px; font-size:16px;}
.btn-block{width:100%;}

/* card */
.card{background:var(--bg); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--sh-1); transition:.2s ease;}

/* image placeholder */
.ph{background:
    repeating-linear-gradient(135deg,rgba(47,111,237,.07) 0 10px,rgba(47,111,237,.02) 10px 20px),
    var(--bg-soft);
  border:1px dashed #b9c6e0; border-radius:var(--r);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-size:12px; color:var(--muted); letter-spacing:.04em;}

/* feature icon tile */
.itile{width:48px; height:48px; border-radius:13px; background:var(--sky);
  color:var(--navy); display:flex; align-items:center; justify-content:center; flex:none;}
.itile svg{width:24px; height:24px;}

/* focus ring */
:focus-visible{outline:none; box-shadow:0 0 0 3px rgba(47,111,237,.35); border-radius:6px;}

/* utility */
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}