/* Cloud theme — DEFAULT color scheme (AIRY LIGHT: soft sky-blue on cloud-white, big
   whitespace, feather-soft blue-tinted shadows, large radius). LIGHT theme — status
   colours are kept DARK so tinted banners/badges stay readable. Only colours + tokens
   here; the airy surfaces/radius/shadows are pinned in style.css :root.
   Developed by Bilal & the HQ Team. */
:root{
  /* ---- brand / accent (sky blue) ---- */
  --c-primary:      #0ea5e9;   /* sky-500 — buttons & links */
  --c-primary-dark: #0284c7;   /* sky-600 hover */
  --c-primary-soft: #e0f2fe;   /* sky-100 tint */
  --c-on-primary:   #ffffff;

  /* ---- airy cloud-white surfaces + soft slate text ---- */
  --c-header:   #ffffff;
  --c-bg:       #f2f8ff;        /* barely-there sky wash */
  --c-card:     #ffffff;
  --c-input:    #f6fafe;
  --c-text:     #1e293b;        /* slate-800 — soft, not pure black */
  --c-muted:    #64748b;        /* slate-500 */
  --c-border:   #e4edf7;        /* soft blue-gray hairline */
  --c-active:   #eff6ff;        /* blue-50 */
  --c-shadow:   rgba(56,110,170,.16);
  --c-overlay:  rgba(30,50,80,.34);
  --c-radius:   14px;

  /* ---- status (LIGHT theme → dark enough to read on their tints) ---- */
  --c-success:  #0f7a4f;  --c-success-bg:  #e7f7ef; --c-success-border:  #b9e6cf;
  --c-danger:   #c02637;  --c-danger-bg:   #fdeaec; --c-danger-border:   #f4c2c8;
  --c-warning:  #97620a;  --c-warning-bg:  #fdf3e2; --c-warning-border:  #f4dcae;
  --c-info:     #0369a1;  --c-info-bg:     #e2f2fc; --c-info-border:     #b6ddf3;
  --c-neutral:  #475569;  --c-neutral-bg:  #eef2f7;
  --c-announce: #0369a1;  --c-announce-bg: #e2f2fc;

  /* ---- misc ---- */
  --c-star:       #f5a623;
  --c-wheel-line: #0ea5e9;

  /* ==== Cloud tokens (read by style.css) — soft sky gradient + feather shadows ==== */
  --c-sky:        linear-gradient(180deg, #eaf5ff 0%, #f2f8ff 100%);
  --c-sky-hero:   linear-gradient(165deg, #dcefff 0%, #eef7ff 55%, #f2f8ff 100%);
  --c-grad:       linear-gradient(120deg, #38bdf8 0%, #0ea5e9 100%);
  --c-ring:       rgba(14,165,233,.30);
  --c-shadow-sm:  0 2px 10px rgba(56,110,170,.08);
  --c-shadow-md:  0 12px 34px rgba(56,110,170,.14);
  --c-shadow-lg:  0 26px 60px rgba(56,110,170,.20);
  --r-sm: 10px;
  --r-lg: 20px;
}