/* Cloud Commons Canada — Universal Styles (aligned to landing page) */

/* ===== Tokens ===== */
:root{
  /* Core palette */
  --teal-900:#0e2f33;      /* page bg */
  --teal-700:#0f4c5c;      /* headings / accents */
  --teal-600:#135d6e;
  --cyan-400:#22d3ee;      /* primary accent */
  --lime-400:#a3e635;      /* highlight CTA */
  --warm-gray-050:#f6f7f8; /* light surface */
  --warm-gray-200:#e5e7eb; /* dividers */
  --ink:#0f172a;           /* body text */
  --white:#fff;

  /* Legacy aliases (so older pages don’t break) */
  --teal:var(--teal-700);
  --cyan:var(--cyan-400);
  --warm-gray:var(--warm-gray-050);
  --warm-gray-2:var(--warm-gray-200);
  --lime:var(--lime-400);
  --text:var(--ink);
  --text-muted:#475569;

  /* Layout */
  --radius:16px;
  --shadow:0 10px 24px rgba(0,0,0,.08);
  --maxw:1080px;
}

@media (prefers-color-scheme: dark){
  :root{
    --warm-gray:#0e1a1c;
    --warm-gray-2:#142326;
    --text:#e5eef0;
    --text-muted:#b2c0c6;
  }
}

/* ===== Base ===== */
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{
  background:var(--teal-900);
  color:var(--text);
  font-family:'Open Sans',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  line-height:1.6;
}
a{color:var(--teal-700);text-decoration:none}
a:hover{text-decoration:underline}

h1,h2,h3{
  font-family:'Montserrat',system-ui,-apple-system,sans-serif;
  margin:0 0 .5rem;
}
h1{font-weight:800;letter-spacing:.2px}
h2,h3{font-weight:700}

.wrap,.container{max-width:var(--maxw);margin:0 auto;padding:0 20px}

/* ===== Brand bar / simple header (for pages not using the web component) ===== */
.brandbar{background:rgba(14,47,51,.90);color:var(--white);backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid rgba(255,255,255,.08)}
.brandbar .wrap{display:flex;align-items:center;justify-content:space-between;min-height:64px}
.logo{display:flex;align-items:center;gap:12px;color:var(--white);text-decoration:none}
.logo-mark{width:28px;height:28px;border-radius:50%;background:radial-gradient(circle at 35% 30%, var(--cyan-400), #6ee7f8 60%, #9ae6b4 100%);box-shadow:0 0 0 2px rgba(255,255,255,.15) inset}
.logo-type{font-weight:800;letter-spacing:.3px}

/* Link chips (matches landing header “pills”) */
.nav-chips{display:flex;gap:10px;flex-wrap:wrap}
.chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  color:var(--white);font-weight:700;text-decoration:none;
  transition:all .2s ease;
}
.chip:hover{background:rgba(255,255,255,.08);transform:translateY(-1px)}
.chip.cta{border-color:transparent;background:linear-gradient(135deg,var(--lime-400),var(--cyan-400));color:#05323a}

/* ===== Hero (generic surface if you need it outside index) ===== */
.hero-surface{background:linear-gradient(180deg,rgba(14,47,51,.98) 0%,rgba(14,47,51,.92) 60%,rgba(14,47,51,.88) 100%);color:var(--white)}
.hero-surface .wrap{padding:64px 20px 40px}
.tagline{font-size:1.125rem;opacity:.95;max-width:70ch}

/* ===== Cards / Grid ===== */
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.card{
  grid-column:span 12;background:var(--white);color:var(--text);
  border:1px solid var(--warm-gray-2);border-radius:var(--radius);
  padding:18px;box-shadow:var(--shadow)
}
@media(min-width:760px){.card{grid-column:span 6}}
@media(min-width:1020px){.card{grid-column:span 4}}
@media(prefers-color-scheme: dark){.card{background:#0d1212;border-color:#1b2626}}

/* ===== Buttons (aligned to landing) ===== */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 16px;border-radius:12px;font-weight:700;
  border:1px solid rgba(2,14,22,.2);color:var(--teal-700);background:#fff;
  text-decoration:none;box-shadow:0 2px 8px rgba(2,14,22,.06);
  transition:box-shadow .2s ease, transform .1s ease, background .2s ease;
}
.btn:hover,.btn:focus{outline:none;background:#f3f6f7;transform:translateY(-1px)}
.btn.btn--primary{
  background:linear-gradient(135deg,var(--cyan-400),var(--lime-400));
  color:#062a30;border-color:transparent;box-shadow:0 6px 18px rgba(2,14,22,.12)
}
.btn.lime{background:var(--lime-400);color:#113;border-color:var(--lime-400)}
/* Legacy aliases */
.btn.primary{background:var(--teal-700);color:var(--white);border-color:var(--teal-700)}
.btn.primary:hover,.btn.primary:focus{box-shadow:0 0 0 3px rgba(34,211,238,.35)}

/* ===== Mission (light section pattern used on landing) ===== */
.mission{
  background:var(--warm-gray-050);color:var(--ink);
  padding:clamp(60px,8vw,120px) 0;text-align:center
}
.mission h2{font-size:clamp(28px,4vw,40px);color:var(--teal-700);margin-bottom:1rem}
.mission .lede{font-size:1.2rem;max-width:70ch;margin:0 auto 3rem;line-height:1.6}
.values{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:2rem;margin-bottom:2.5rem}
.value h3{color:var(--teal-700);margin-bottom:.5rem;font-size:1.25rem}
.value p{opacity:.9;line-height:1.6}
.mission .buttons{display:flex;gap:12px;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:1.25rem}
.mission .btn{background:#fff;color:var(--teal-700);border-color:var(--warm-gray-200)}
.mission .btn:hover{background:#f3f6f7}
.mission .btn.btn--primary{background:linear-gradient(135deg,var(--cyan-400),var(--lime-400));color:#062a30;border-color:transparent;box-shadow:0 6px 18px rgba(2,14,22,.12)}

/* ===== Wells / Footer ===== */
.well{background:var(--white);border:1px solid var(--warm-gray-2);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
.footer{border-top:1px solid var(--warm-gray-2);margin-top:48px}
.footer .wrap{max-width:var(--maxw);margin:0 auto;padding:24px 20px;color:var(--text-muted)}
.footer a{color:var(--teal-700);font-weight:700}

/* ===== Utilities ===== */
.badges{display:flex;gap:10px;margin-top:14px}
.badge{display:inline-block;font-size:.8rem;font-weight:700;letter-spacing:.3px;padding:6px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.25)}
.meta{color:var(--text-muted);font-size:.95rem}

/* Motion respect */
@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important}
}