/* ════════════════════════════════════════
   BEEYACORP — styles.css
   LOAD ORDER: 1 of 4
   Contains: CSS custom properties (:root),
   reset, global base, keyframes.
   ALL other files depend on these tokens.
   ════════════════════════════════════════ */

/* ══ Design tokens ══
   Exact hex values from brand guidelines v1.1
   ════════════════════════════════════════ */
:root {
  /* Colours */
  --c-navy:         #0a0d1a;
  --c-charcoal:     #0f1320;
  --c-charcoal2:    #141828;
  --c-grey:         #f2f3f5;
  --c-blue:         #2563ff;
  --c-blueb:        #3b82f6;
  --c-white:        #ffffff;
  --c-offwhite:     #c8cdd8;
  --c-muted:        #7a839a;
  --c-border:       rgba(255, 255, 255, 0.08);
  --c-border-strong:rgba(255, 255, 255, 0.14);
  --c-red:          #ef4444;
  --c-green:        #22c55e;

  /* Semantic backgrounds */
  --bg-dark:   #0a0d1a;
  --bg-mid:    #0f1320;
  --bg-mid2:   #141828;
  --bg-footer: #060810;

  /* Typography */
  --font-head: 'Syne', sans-serif;
  --font-body: 'DM Sans', sans-serif;

  /* Spacing scale */
  --sp-xs:  8px;
  --sp-sm:  16px;
  --sp-md:  24px;
  --sp-lg:  32px;
  --sp-xl:  48px;
  --sp-2xl: 64px;
  --sp-3xl: 80px;

  /* Border radii */
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   12px;
  --r-xl:   16px;
  --r-pill: 100px;

  /* Transitions */
  --t-fast: 0.15s ease;
  --t-base: 0.22s ease;
}

/* ══ Reset ══ */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--c-white);
  background: var(--c-navy);
  overflow-x: hidden;
}

img    { max-width: 100%; height: auto; display: block; }
a      { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: var(--font-body); }
p      { margin: 0; }
h1, h2, h3 { margin: 0; }
ul     { list-style: none; padding: 0; margin: 0; }

/* ══ Text overflow prevention ══
   Prevents long words / URLs from breaking layouts
   at any viewport width. Applied globally per brief.
   ════════════════════════════════════════ */
h1, h2, h3, h4, h5, h6,
p, span, li, a, td, th, label, blockquote {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* ══ Form element global width safety ══
   Prevents inputs from exceeding their container
   at any viewport width. box-sizing already set
   globally above; this reinforces for form elements.
   ════════════════════════════════════════ */
input,
textarea,
select {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* ══ Accessibility ══ */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute; top: -100px; left: 0;
  background: var(--c-blue); color: var(--c-white);
  padding: 8px 16px; z-index: 99999;
  border-radius: 0 0 var(--r-sm) 0;
  font-size: 14px; font-weight: 700;
  text-decoration: none;
  transition: top var(--t-base);
}
.skip-link:focus { top: 0; }

/* ══ Reduced motion ══ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ══ Keyframes ══ */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.35; }
}

@keyframes fadein {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes scroll-x {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Global animation helpers */
.pulse-dot { animation: pulse 2s infinite; }
.fadein    { animation: fadein 0.3s ease both; }

/* ══ Section-level background + text theming ══
   Explicit declarations so every section has
   correct text colour regardless of load order.
   ════════════════════════════════════════ */

/* Dark navy sections */
.section-problem,
.section-testi {
  background: var(--bg-dark);
}
.section-problem h2,
.section-problem .h2,
.section-testi h2,
.section-testi .h2 {
  color: var(--c-white);
}

/* Charcoal sections */
.section-method {
  background: var(--bg-mid);
}
.section-method h2,
.section-method .h2 {
  color: var(--c-white);
}

/* Charcoal-2 sections (ls = "layered section" on dark palette) */
.ls,
.section-deliv {
  background: var(--bg-mid2);
}
.ls h2, .ls h3, .ls h4,
.section-deliv h2, .section-deliv h3 {
  color: var(--c-white);
}
.ls p, .ls li,
.section-deliv p {
  color: var(--c-offwhite);
}
.ls .tag {
  color: var(--c-blueb);
  border-color: rgba(59, 130, 246, 0.25);
}
.ls .tag .dot      { background: var(--c-blueb); }
.ls .h2            { color: var(--c-white); }
.ls .h2 em         { color: var(--c-blueb); }
.ls .body-text     { color: var(--c-offwhite); }