/* ══════════════════════════════════════════════════════════════
   Adnah Healthcare — design tokens
   Source of truth: Website Developer Brief v1.0 (Sept 2026), §05.
   Brief values supersede anything sampled from logo artwork.
   ══════════════════════════════════════════════════════════════ */
:root{
  /* ── Palette (brief §05) ──────────────────────────────────── */
  --navy:       #00284C;  /* 13.99 on page bg — headings, primary buttons, dark panels, footer */
  --navy-deep:  #001A33;  /* hover state, darkest surfaces */
  --mint:       #3DFFB1;  /* ACCENT. 1.30 on white = FAILS body text.
                             Only on navy, or as decoration. Never mint text on light. */
  --navy-soft:  #E4ECF4;  /* icon backgrounds, subtle tints */
  --page:       #F5F8FB;  /* page background */
  --ink:        #0B1B2B;  /* body text — 16.34 on page bg */
  --line:       #D5DFE9;  /* 1px card + tile borders */
  --white:      #FFFFFF;

  /* ── Type (brief §05) ─────────────────────────────────────── */
  --font-head: "Lexend", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* ── Layout (brief §05) ───────────────────────────────────── */
  --maxw:       1180px;
  --gutter:     20px;   /* minimum, all screens */
  --radius:     14px;   /* cards */
  --radius-pill:999px;  /* pill buttons */
  --shadow-hover: 0 6px 20px rgba(0,40,76,.10);

  --logo-h-desktop: 48px;
  --logo-h-mobile:  40px;

  --tap: 44px;          /* WCAG 2.2 AA target size */

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px;
}

html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--page); color:var(--ink);
  font-family:var(--font-body); font-weight:400; line-height:1.6;
  min-width:320px;                      /* brief: works fully at 320px */
}
h1,h2,h3,h4,h5{ font-family:var(--font-head); color:var(--navy); margin:0; }

.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }

/* ── Focus: 3px accent outline, 2px offset (brief §06) ─────── */
:focus-visible{ outline:3px solid var(--mint); outline-offset:2px; }

/* Skip link must be the first focusable element */
.skip{
  position:absolute; left:var(--gutter); top:-100px; z-index:999;
  background:var(--navy); color:var(--white);
  padding:var(--s3) var(--s4); border-radius:0 0 var(--radius) var(--radius);
  text-decoration:none; font-weight:600;
}
.skip:focus{ top:0; }

/* ── Sticky header: off-white, 92% opacity, backdrop blur ──── */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(245,248,251,.92);
  backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);
}
.site-header .logo{ height:var(--logo-h-mobile); width:auto; display:block; }
@media (min-width:768px){ .site-header .logo{ height:var(--logo-h-desktop); } }

/* ── Buttons — pills ──────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:var(--tap); padding:0 var(--s5);
  border-radius:var(--radius-pill); border:1px solid transparent;
  font-family:var(--font-head); font-weight:600; font-size:1rem;
  text-decoration:none; cursor:pointer;
}
/* navy on mint = 11.46 AAA */
.btn-primary{ background:var(--mint); color:var(--navy); }
.btn-primary:hover{ background:#2BE9A0; }
/* white on navy = 14.92 AAA */
.btn-secondary{ background:var(--navy); color:var(--white); }
.btn-secondary:hover{ background:var(--navy-deep); }
.btn-ghost{ background:transparent; color:var(--navy); border-color:var(--navy); }

/* ── Cards and tiles ──────────────────────────────────────── */
.card{
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--radius); padding:var(--s5);
}
.card:hover{ box-shadow:var(--shadow-hover); }

/* Icon backgrounds: Navy Soft with Navy Deep icons */
.icon-tile{
  background:var(--navy-soft); color:var(--navy-deep);
  width:48px; height:48px; border-radius:var(--radius);
  display:grid; place-items:center;
}

/* ── Eyebrow: mint bar + navy label. Mint is decoration only ── */
.eyebrow{
  display:flex; align-items:center; gap:var(--s3);
  font-family:var(--font-head); font-weight:700; font-size:.78rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--navy);
}
.eyebrow::before{ content:""; width:22px; height:3px; background:var(--mint); border-radius:2px; }

/* Dark panels — mint on navy = 11.46 AAA, safe here */
.panel-navy{ background:var(--navy); color:var(--white); }
.panel-navy h1,.panel-navy h2,.panel-navy h3{ color:var(--white); }
.panel-navy .accent{ color:var(--mint); }

/* ── Motion (brief §06) ───────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
}