/* ==========================================================================
   Safety Assist — Global Design System
   Tokens, resets, typography
   ========================================================================== */

:root{
  /* Color system — extracted directly from the Safety Assist logo:
     forest green (#006435) and safety gold (#FFCB05). */
  --color-primary:        #006435;   /* Safety Assist forest green — brand, fixed across themes */
  --color-primary-dark:   #003D21;   /* deepened green — brand, fixed across themes */
  --color-primary-light:  #0C8A4C;   /* brighter green — hovers, secondary surfaces */
  --color-accent:         #FFCB05;   /* Safety Assist gold — brand, fixed across themes */
  --color-accent-deep:    #D9A700;

  /* Adaptive surface/text tokens — these flip under [data-theme="dark"] below */
  --color-background:     #F6F7F4;
  --color-surface:        #FFFFFF;
  --color-surface-raised: #FFFFFF;
  --color-text:           #16241C;
  --color-text-muted:     #526356;
  --color-border:         #DEE3DC;
  --color-border-dark:    #23422F;
  --color-heading:        #003D21;   /* adaptive: dark green on light, near-white on dark */
  --color-header-bg:      rgba(246,247,244,0.86);
  --color-header-bg-solid:rgba(246,247,244,0.96);

  /* Neutral surfaces — used to break up large green fills. Green stays the
     brand accent; these carry the big background areas instead. */
  --color-stone:          #ECEAE4;   /* warm light neutral, alternates with paper */
  --color-ink:            #1C221F;   /* near-neutral dark, replaces green fills */
  --color-ink-soft:       #252D28;

  /* Fixed "screenshot" tokens for product mockups — mockups represent a literal
     app screen and should look the same in light or dark site theme, the way a
     real screenshot embed would. Never swapped by the theme toggle. */
  --mock-bg:        #FFFFFF;
  --mock-surface:   #F6F7F4;
  --mock-text:      #16241C;
  --mock-text-dim:  #526356;
  --mock-border:    #DEE3DC;
  --mock-heading:   #003D21;

  --font-display: "Manrope", "Segoe UI", sans-serif;
  --font-body: "Inter", "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Menlo, monospace;

  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px;
  --space-7: 96px;
  --space-8: 128px;

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;

  --shadow-sm: 0 2px 6px rgba(0,61,33,0.07);
  --shadow-md: 0 12px 32px rgba(0,61,33,0.12);
  --shadow-lg: 0 28px 72px rgba(0,61,33,0.20);

  --container-max: 1320px;
  --container-narrow: 860px;

  --ease: cubic-bezier(.2,.7,.2,1);
}

/* ---------- Dark theme ---------- */
:root[data-theme="dark"]{
  --color-background:      #0B1712;
  --color-surface:         #12241C;
  --color-surface-raised:  #17301F;
  --color-text:            #EAF0EA;
  --color-text-muted:      #9CB0A2;
  --color-border:          #23402E;
  --color-border-dark:     #3A5C43;
  --color-heading:         #F4FBF4;
  --color-header-bg:       rgba(11,23,18,0.86);
  --color-header-bg-solid: rgba(11,23,18,0.96);
  --color-stone:           #101A15;
  --color-ink:             #080D0A;
  --color-ink-soft:        #111815;
  --shadow-sm: 0 2px 6px rgba(0,0,0,0.28);
  --shadow-md: 0 12px 32px rgba(0,0,0,0.38);
  --shadow-lg: 0 28px 72px rgba(0,0,0,0.5);
}

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

html{
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

body{
  margin: 0;
  background: var(--color-background);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-x: clip;
}

/* The off-canvas mobile menu sits at translateX(100%), which generates
   scrollable overflow. `clip` contains it without establishing a scroll
   container, so the sticky header and legal-page TOC keep working. */
html{ overflow-x: clip; }

img{ max-width: 100%; display: block; }
svg{ display: block; }

a{ color: inherit; text-decoration: none; }

h1, h2, h3, h4, h5{
  font-family: var(--font-display);
  color: var(--color-heading);
  line-height: 1.12;
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.01em;
}

p{ margin: 0; }

ul{ margin: 0; padding: 0; list-style: none; }

button{ font-family: inherit; color: inherit; }

::selection{ background: var(--color-accent); color: var(--color-primary-dark); }

:focus-visible{
  outline: 2px solid var(--color-accent-deep);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---- Type scale ---- */
.h-display{ font-size: clamp(2.6rem, 5vw, 4.6rem); line-height: 1.04; }
.h-1{ font-size: clamp(2.1rem, 3.6vw, 3.1rem); }
.h-2{ font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
.h-3{ font-size: clamp(1.2rem, 1.6vw, 1.5rem); }
.body-lg{ font-size: 1.15rem; line-height: 1.6; color: var(--color-text-muted); }
.body-md{ font-size: 1rem; line-height: 1.65; color: var(--color-text-muted); }
.body-sm{ font-size: 0.9rem; color: var(--color-text-muted); }

.eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--color-accent-deep);
  margin-bottom: var(--space-2);
}
.eyebrow::before{
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--color-accent);
  flex-shrink: 0;
}

.metric{ font-family: var(--font-mono); }

/* ---- Layout helpers ---- */
.container{
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-3);
}
.container-narrow{
  max-width: var(--container-narrow);
  margin: 0 auto;
  padding: 0 var(--space-3);
}

.section{ padding: var(--space-6) 0; position: relative; }
.section-tight{ padding: var(--space-5) 0; position: relative; }
.section + .section,
.section-tight + .section-tight,
.section + .section-tight,
.section-tight + .section{
  border-top: none;
}
.section + .section::before,
.section-tight + .section-tight::before,
.section + .section-tight::before,
.section-tight + .section::before{
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-border) 20%, var(--color-border) 80%, transparent);
}

@media (max-width: 900px){
  .section{ padding: var(--space-5) 0; }
  .section-tight{ padding: var(--space-4) 0; }
}

/* ---------- Decorative background accents for plain sections ---------- */
.decor{ position: absolute; pointer-events: none; z-index: 0; overflow: hidden; }
.decor-dots{
  width: 320px; height: 320px;
  background-image: radial-gradient(var(--color-primary) 1.5px, transparent 1.5px);
  background-size: 24px 24px;
  opacity: 0.07;
  mask-image: radial-gradient(circle, black 40%, transparent 75%);
}
.decor-dots.tr{ top: -40px; right: -40px; }
.decor-dots.bl{ bottom: -40px; left: -40px; }

.decor-blob{
  width: 420px; height: 420px;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.10;
  background: radial-gradient(circle, var(--color-primary) 0%, transparent 70%);
}
.decor-blob.gold{ background: radial-gradient(circle, var(--color-accent) 0%, transparent 70%); }
.decor-blob.tr{ top: -120px; right: -120px; }
.decor-blob.bl{ bottom: -140px; left: -160px; }
.decor-blob.tl{ top: -120px; left: -160px; }

.decor-corner{
  width: 140px; height: 140px;
  border-top: 1.5px solid var(--color-border-dark);
  border-right: 1.5px solid var(--color-border-dark);
  opacity: 0.35;
}
.decor-corner.tr{ top: var(--space-4); right: var(--space-4); border-left: none; border-bottom: none; }
.decor-corner.bl{ bottom: var(--space-4); left: var(--space-4); border-top: none; border-right: none; border-left: 1.5px solid var(--color-border-dark); border-bottom: 1.5px solid var(--color-border-dark); }

.section > .container{ position: relative; z-index: 1; }

.stack-2 > * + *{ margin-top: var(--space-2); }
.stack-3 > * + *{ margin-top: var(--space-3); }
.stack-4 > * + *{ margin-top: var(--space-4); }

.visually-hidden{
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link{
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--color-primary-dark);
  color: #fff;
  padding: 12px 20px;
  z-index: 200;
  border-radius: 0 0 8px 0;
}
.skip-link:focus{ left: 0; }