/* Comfort Circle - brand colour system (direction 1b: navy-immersive, accent spectrum)
   Loaded FIRST, before Tailwind and site.css. Hexes sampled from the logo mark.
   Rule of thumb: 60% neutral surfaces / 30% Comfort Blue / 10% red + accents.
   Accents carry meaning, never decoration:
     cyan = Comfort Afya (medical) - green = chama, success, M-Pesa
     orange = events, due-soon - gold = training, pending, CTA on navy
     red = the single decisive action (Register / Make a Claim), errors. */

:root {
  /* ---- Primary: Comfort Blue ---- */
  --cc-blue-900: #052248;  /* deepest surfaces: hero base, sidebar, footer */
  --cc-blue-800: #062C63;  /* dark headings, top utility bar */
  --cc-blue-700: #0A3D8F;  /* hover on primary, hero gradient light end */
  --cc-blue-600: #0B57A4;  /* PRIMARY - buttons, links, active nav, icons */
  --cc-blue-400: #2E86DE;  /* hover tints on dark, charts */
  --cc-blue-100: #B9D4F1;  /* borders on blue tints */
  --cc-blue-50:  #E4EEFA;  /* pills, subtle blue backgrounds */

  /* ---- Secondary: Faraja Red ---- */
  --cc-red-900:  #7C0D12;
  --cc-red-800:  #9B1015;  /* hover on red */
  --cc-red-600:  #C4161C;  /* SECONDARY - Register / Make a Claim, errors, tagline */
  --cc-red-400:  #DC3B41;
  --cc-red-100:  #F6C9CB;
  --cc-red-50:   #FDEDEE;

  /* ---- Accents: one job each (from the logo) ---- */
  --cc-cyan:     #29ABE2;  /* Comfort Afya medical / info */
  --cc-cyan-50:  #E2F4FC;
  --cc-cyan-ink: #0A5E85;

  --cc-green:    #8CB824;  /* chama / group welfare / success / M-Pesa */
  --cc-green-50: #EEF6DC;
  --cc-green-ink:#4A6B00;

  --cc-orange:   #F07E17;  /* Events / warning, premium due soon */
  --cc-orange-50:#FFF0E0;
  --cc-orange-ink:#9A4A00;

  --cc-gold:     #FFC61E;  /* Training / pending review / "Most popular" / on-navy CTA */
  --cc-gold-50:  #FFF6DC;
  --cc-gold-ink: #8A5A00;

  /* ---- Neutrals (most of the UI) ---- */
  --cc-ink:      #0F1720;  /* body text, headings on light */
  --cc-muted:    #5A6672;  /* secondary text */
  --cc-faint:    #8A94A0;  /* captions, meta */
  --cc-border:   #E6EAEF;
  --cc-surface:  #F5F7FA;  /* page background, table stripes */
  --cc-white:    #FFFFFF;

  /* ---- Semantic aliases: use THESE in components ---- */
  --cc-primary: var(--cc-blue-600);
  --cc-primary-hover: var(--cc-blue-700);
  --cc-primary-dark: var(--cc-blue-900);
  --cc-secondary: var(--cc-red-600);
  --cc-secondary-hover: var(--cc-red-800);
  --cc-success: var(--cc-green);
  --cc-info: var(--cc-cyan);
  --cc-warning: var(--cc-orange);
  --cc-pending: var(--cc-gold);
  --cc-danger: var(--cc-red-600);
  --cc-link: var(--cc-blue-600);
  --cc-link-hover: var(--cc-red-600);
  --cc-focus-ring: 0 0 0 3px rgba(11, 87, 164, .28);

  /* ---- Product-line colours (keep consistent everywhere) ---- */
  --cc-line-funeral: var(--cc-blue-600);
  --cc-line-afya:    var(--cc-cyan);
  --cc-line-chama:   var(--cc-green);
  --cc-line-events:  var(--cc-orange);
  --cc-line-training:var(--cc-gold);
  --cc-line-claims:  var(--cc-red-600);

  --cc-radius: 7px;
  --cc-radius-lg: 10px;
}

/* Hero / dark surface used across the site */
.cc-hero-dark { background: radial-gradient(120% 120% at 85% 0%, var(--cc-blue-700) 0%, var(--cc-blue-900) 60%); color: #fff; }

/* Signature 6-colour spectrum rule (under the nav, above the footer, top of modals)
   markup: <div class="cc-spectrum"><i></i><i></i><i></i><i></i><i></i><i></i></div> */
.cc-spectrum { height: 4px; display: flex; }
.cc-spectrum > i { flex: 1; }
.cc-spectrum > i:nth-child(1) { background: var(--cc-blue-600); }
.cc-spectrum > i:nth-child(2) { background: var(--cc-cyan); }
.cc-spectrum > i:nth-child(3) { background: var(--cc-green); }
.cc-spectrum > i:nth-child(4) { background: var(--cc-gold); }
.cc-spectrum > i:nth-child(5) { background: var(--cc-orange); }
.cc-spectrum > i:nth-child(6) { background: var(--cc-red-600); }

/* Buttons */
.cc-btn { font-weight: 700; border-radius: var(--cc-radius); padding: 11px 18px; border: 0; cursor: pointer; line-height: 1; }
.cc-btn-primary { background: var(--cc-primary); color: #fff; }
.cc-btn-primary:hover { background: var(--cc-primary-hover); }
.cc-btn-secondary { background: var(--cc-secondary); color: #fff; }
.cc-btn-secondary:hover { background: var(--cc-secondary-hover); }
.cc-btn-outline { background: #fff; color: var(--cc-primary); border: 1.5px solid var(--cc-primary); padding: 10px 18px; }
.cc-btn-outline:hover { background: var(--cc-blue-50); }
.cc-btn-gold { background: var(--cc-gold); color: var(--cc-blue-900); }   /* CTA on navy */
.cc-btn-mpesa { background: var(--cc-green); color: #fff; }
.cc-btn:focus-visible { outline: none; box-shadow: var(--cc-focus-ring); }

/* Status badges */
.cc-badge { display: inline-block; font-size: 10.5px; font-weight: 700; border-radius: 999px; padding: 5px 11px; border: 1px solid; }
.cc-badge-active  { color: var(--cc-green-ink);  background: var(--cc-green-50);  border-color: #D3E7A4; }
.cc-badge-pending { color: var(--cc-gold-ink);   background: var(--cc-gold-50);   border-color: #FBE49B; }
.cc-badge-due     { color: var(--cc-orange-ink); background: var(--cc-orange-50); border-color: #FBD0A4; }
.cc-badge-lapsed  { color: var(--cc-red-800);    background: var(--cc-red-50);    border-color: var(--cc-red-100); }
.cc-badge-afya    { color: var(--cc-cyan-ink);   background: var(--cc-cyan-50);   border-color: #A9DFF5; }
.cc-badge-funeral { color: var(--cc-blue-700);   background: var(--cc-blue-50);   border-color: var(--cc-blue-100); }