/* ═══════════════════════════════════════════
   SAFETY CENTRAL — Design Tokens
   Deep navy palette, amber authority, instrument precision
═══════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
    /* ── Background layers ── */
    --bg-0:         #050D1A;   /* darkest — footer */
    --bg-1:         #071628;   /* base dark sections */
    --bg-2:         #0C1E38;   /* surface light sections, nav */
    --bg-3:         #112847;   /* elevated cards on dark */
    --bg-4:         #18324F;   /* hover states */

    /* ── Borders ── */
    --border:       #1A3452;
    --border-mid:   rgba(255,255,255,0.07);
    --border-subtle:rgba(255,255,255,0.03);

    /* ── Amber accent ── */
    --amber:        #F59E0B;
    --amber-h:      #D97706;   /* hover */
    --amber-dim:    rgba(245,158,11,0.10);
    --amber-bdr:    rgba(245,158,11,0.22);
    --amber-glow:   rgba(245,158,11,0.14);
    --amber-on:     #050D1A;   /* text on amber bg */

    /* ── Permit colors ── */
    --hw:           #F87171;
    --hw-dim:       rgba(248,113,113,0.08);
    --hw-bdr:       rgba(248,113,113,0.20);
    --hw-glow:      rgba(248,113,113,0.12);

    --cs:           #60A5FA;
    --cs-dim:       rgba(96,165,250,0.08);
    --cs-bdr:       rgba(96,165,250,0.20);
    --cs-glow:      rgba(96,165,250,0.12);

    --wah:          #C084FC;
    --wah-dim:      rgba(192,132,252,0.08);
    --wah-bdr:      rgba(192,132,252,0.20);
    --wah-glow:     rgba(192,132,252,0.12);

    /* ── Status ── */
    --ok:           #22C55E;
    --ok-dim:       rgba(34,197,94,0.08);
    --ok-bdr:       rgba(34,197,94,0.22);
    --err:          #EF4444;
    --err-dim:      rgba(239,68,68,0.08);
    --err-bdr:      rgba(239,68,68,0.22);

    /* ── Text ── */
    --t1:           #EDF2F8;   /* headings, primary */
    --t2:           #7A9FBD;   /* body — navy-tinted secondary */
    --t3:           #3A5E7A;   /* muted */

    /* ── Radii ── */
    --r-s:  6px;
    --r-m:  10px;
    --r-l:  14px;
    --r-xl: 20px;
    --r-f:  999px;

    /* ── Shadows ── */
    --shadow-s: 0 1px 3px rgba(0,0,0,0.5), 0 4px 12px rgba(0,0,0,0.3);
    --shadow-m: 0 4px 16px rgba(0,0,0,0.4), 0 12px 40px rgba(0,0,0,0.25);
    --shadow-amber: 0 0 32px rgba(245,158,11,0.12);
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 15px;
    background: var(--bg-1);
    color: var(--t1);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.01em;
}

.mono {
    font-family: 'IBM Plex Mono', monospace;
}

img { display: block; max-width: 100%; }
a   { text-decoration: none; color: inherit; }
button { font-family: inherit; cursor: pointer; }

section[id] { scroll-margin-top: 80px; }

/* ── Layout helpers ── */
.container {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 28px;
    width: 100%;
}

.container-sm {
    max-width: 780px;
    margin: 0 auto;
    padding: 0 28px;
    width: 100%;
}

/* ── Grid pattern (instrument chart paper) ── */
.grid-bg {
    background-image:
        linear-gradient(var(--border-subtle) 1px, transparent 1px),
        linear-gradient(90deg, var(--border-subtle) 1px, transparent 1px);
    background-size: 28px 28px;
    background-attachment: fixed;
}

/* ── Section backgrounds ── */
.bg-dark    { background-color: var(--bg-1); }
.bg-surface { background-color: var(--bg-2); }
.bg-darkest { background-color: var(--bg-0); }

/* ── Eyebrow label ── */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--amber);
    margin-bottom: 20px;
}

.eyebrow::before {
    content: '';
    display: block;
    width: 28px;
    height: 1.5px;
    background: var(--amber);
    flex-shrink: 0;
}

.eyebrow-cs {
    color: var(--cs);
}

.eyebrow-cs::before {
    background: var(--cs);
}

.eyebrow-err {
    color: var(--err);
}

.eyebrow-err::before {
    background: var(--err);
}

/* ── Section header centered ── */
.section-header {
    text-align: center;
    margin-bottom: 56px;
}

.section-header .eyebrow {
    justify-content: center;
}

.section-header .eyebrow::before {
    display: none;
}

.section-header .eyebrow::after {
    content: '';
    display: block;
    width: 28px;
    height: 1.5px;
    background: currentColor;
    flex-shrink: 0;
}

.section-title {
    font-size: clamp(32px, 4vw, 52px);
    font-weight: 800;
    color: var(--t1);
    line-height: 1.05;
    margin-bottom: 16px;
}

.section-lead {
    font-size: 16px;
    line-height: 1.75;
    color: var(--t2);
    max-width: 520px;
    margin: 0 auto;
}

/* ── Horizontal divider amber ── */
.amber-rule {
    width: 36px;
    height: 2px;
    background: var(--amber);
    border-radius: 2px;
    margin: 14px auto 0;
}

@media (max-width: 900px) {
    .grid-bg { background-attachment: scroll; }
}