/* theme.css — brand tokens per "C-The-Way Corporate Identity Digital Manual" (Final, July 2026).
   This is the source of truth for this site's palette/type. mobileapp/constants/theme.ts,
   businessportal/…/theme.css and adminpanel/…/theme.css now carry the same four CI anchors
   (#0a4968 / #1e7c82 / #e67a7a / #f5f2ec); the earlier deep-navy #002a3e + protea-pink #9d3e53
   system they used has been retired. Change an anchor here and it must change in all four. */
:root {
  /* Primary — Deep Ocean Blue (60%): trust, ocean, reliability */
  --ctw-primary: #0a4968;
  --ctw-primary-dark: #072f42;
  --ctw-on-primary: #ffffff;

  /* Secondary — Atlantic Teal (20%): discovery, nature, exploration.
     The CI gives this a full 20% share — it is the "nature/exploration" colour and must carry
     real weight (hero gradient, section accents, icons), not just appear in links. */
  --ctw-teal: #1e7c82;
  --ctw-teal-dark: #145458;
  --ctw-teal-light: #4a9ba1;
  --ctw-teal-tint: #dfeeee;
  --ctw-on-teal: #ffffff;

  /* Accent — Cape Sunset Coral (10%): highlights, buttons, rewards.
     Deliberately sparing — one warm call to action per section, per the CI's 10% share. */
  --ctw-coral: #e67a7a;
  --ctw-coral-dark: #c85a5a;
  --ctw-coral-tint: #fbe4e4;
  --ctw-on-coral: #2a1414;

  /* Background — Sandstone (10%): warmth, natural, authenticity */
  --ctw-sandstone: #f5f2ec;

  /* Neutral surfaces derived from Sandstone/Deep Ocean Blue, for cards/text/borders --
     not separately specified in the CI manual, extended here for a working UI. */
  --ctw-surface-lowest: #ffffff;
  --ctw-surface-low: #faf8f3;
  --ctw-surface: var(--ctw-sandstone);
  --ctw-surface-high: #ebe6db;
  --ctw-on-surface: #1c2126;
  --ctw-on-surface-variant: #4d565d;
  --ctw-outline: #8b9198;
  --ctw-outline-variant: #d8d3c6;

  /* Radius / shadow */
  --ctw-r-sm: 4px;
  --ctw-r-base: 8px;
  --ctw-r-md: 12px;
  --ctw-r-lg: 16px;
  --ctw-r-xl: 24px;
  --ctw-shadow: 0 1px 2px rgba(10, 73, 104, 0.06), 0 10px 28px rgba(10, 73, 104, 0.07);

  /* Typography — Plus Jakarta Sans primary (CI manual p.13); Arial is the CI's specified
     fallback for Office/email use only, not for the web, so the web stack falls back to system
     sans instead. Scale mirrors the manual's H1 48 / H2 36 / H3 28 / Body 16 / Caption 12 (pt),
     expressed as a responsive clamp() scale rather than a fixed px conversion. */
  --ctw-font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ctw-h1: clamp(2rem, 1.4rem + 2.6vw, 3rem);   /* ~48pt at desktop */
  --ctw-h2: clamp(1.6rem, 1.3rem + 1.4vw, 2.25rem); /* ~36pt */
  --ctw-h3: clamp(1.3rem, 1.15rem + 0.7vw, 1.75rem); /* ~28pt */
  --ctw-caption: 0.8rem; /* ~12pt */
}

/* The CI manual doesn't define a dark-mode variant (it's a light, sandstone-first system), so
   we keep the palette identical in dark mode and only deepen the neutral surfaces for contrast,
   rather than inventing brand colours the manual never specified. */
@media (prefers-color-scheme: dark) {
  :root {
    --ctw-surface-lowest: #16202a;
    --ctw-surface-low: #1b2731;
    --ctw-surface: #1f2c37;
    --ctw-surface-high: #26343f;
    --ctw-on-surface: #eef2f4;
    --ctw-on-surface-variant: #c3cdd3;
    --ctw-outline: #7c8890;
    --ctw-outline-variant: #37454f;
    --ctw-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 28px rgba(0, 0, 0, 0.35);
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--ctw-sandstone);
  color: var(--ctw-on-surface);
  font-family: var(--ctw-font);
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
}

@media (prefers-color-scheme: dark) { html, body { background: var(--ctw-surface); } }

body { font-size: 16px; line-height: 1.6; }

h1, h2, h3, h4 {
  color: var(--ctw-primary);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 0.6em;
}
@media (prefers-color-scheme: dark) { h1, h2, h3, h4 { color: #bcd6e4; } }

h1 { font-size: var(--ctw-h1); line-height: 1.12; }
h2 { font-size: var(--ctw-h2); line-height: 1.18; }
h3 { font-size: var(--ctw-h3); line-height: 1.25; }

p { margin: 0 0 1em; color: var(--ctw-on-surface-variant); }
.caption, small { font-size: var(--ctw-caption); }

a { color: var(--ctw-teal-dark); text-decoration: none; }
a:hover { color: var(--ctw-coral-dark); text-decoration: underline; }

.container { max-width: 1120px; margin: 0 auto; padding: 0 1.5rem; }
.container-narrow { max-width: 760px; margin: 0 auto; padding: 0 1.5rem; }

/* ── Buttons — per CI p.7/17: never corporate/salesy/pushy. Primary = calm navy "Explore" style;
   Coral is reserved for the one warm, experiential call to action per screen, not stacked buttons. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--ctw-font);
  font-weight: 600;
  font-size: 0.95rem;
  border-radius: 50rem;
  padding: 0.75rem 1.5rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease;
  text-decoration: none;
  line-height: 1.2;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn-primary { background: var(--ctw-primary); color: var(--ctw-on-primary); }
.btn-primary:hover { background: var(--ctw-primary-dark); color: var(--ctw-on-primary); }
.btn-secondary { background: var(--ctw-coral); color: var(--ctw-on-coral); }
.btn-secondary:hover { background: var(--ctw-coral-dark); color: var(--ctw-on-coral); }
.btn-outline {
  background: transparent;
  color: var(--ctw-on-primary);
  border-color: rgba(255, 255, 255, 0.45);
}
.btn-outline:hover { background: rgba(255, 255, 255, 0.12); color: var(--ctw-on-primary); }
.btn-ghost { background: var(--ctw-surface-high); color: var(--ctw-primary); }
.btn-ghost:hover { background: var(--ctw-outline-variant); color: var(--ctw-primary); }
.btn-lg { padding: 0.9rem 1.9rem; font-size: 1.05rem; }
.btn[disabled], .btn.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none !important;
}

/* ── Cards — clean grid, rounded, subtle elevation (CI "design direction", p.19) ─────────── */
.card {
  background: var(--ctw-surface-lowest);
  border: 1px solid var(--ctw-outline-variant);
  border-radius: var(--ctw-r-xl);
  padding: 1.75rem;
  box-shadow: var(--ctw-shadow);
}

/* ── Pills / badges ──────────────────────────────────────────────────────── */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border-radius: 50rem;
  padding: 0.3rem 0.9rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.pill-accent { background: var(--ctw-coral-tint); color: var(--ctw-coral-dark); }
.pill-teal { background: var(--ctw-teal-tint); color: var(--ctw-teal-dark); }
.pill-neutral { background: var(--ctw-surface-high); color: var(--ctw-on-surface-variant); }
.pill-outline-light {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.35);
}

/* ── Section rhythm — generous whitespace per CI "design direction" ─────────────────────── */
section { padding: 5.5rem 0; }
@media (max-width: 640px) { section { padding: 3.5rem 0; } }

.eyebrow {
  display: inline-block;
  color: var(--ctw-teal-dark);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--ctw-primary);
  color: #fff;
  padding: 0.75rem 1.25rem;
  z-index: 1000;
  border-radius: 0 0 var(--ctw-r-md) 0;
}
.skip-link:focus { left: 0; }

/* Screen-reader-only. Defined here because this site loads Bootstrap *Icons* only,
   not Bootstrap itself — so Bootstrap's own .visually-hidden is not available. */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}