/* 01-foundation.css: tokens, fonts, reset, base typography, forms, alerts.
   FILE ORDER IS CASCADE ORDER across the numbered stylesheets. */

/* Self-hosted fonts (org rule: no external font CDNs; CSP allows no external
   style or font hosts). Variable latin subsets, font-display: swap so text
   paints immediately in the system fallback. Preloaded in App.razor. */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/fonts/inter-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('/fonts/oswald-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Design tokens: PROVISIONAL Reinhardt palette (greens, brown accent, near-black
   dark family). Token NAMES are kept so the layout CSS is untouched; the design
   lane re-skins later. */
:root {
    --white: #FFFFFF;          /* page background (light sections) */
    --off-white: #F6F7F3;      /* alternating section background */
    --silver-100: #E8EAED;     /* cards, borders, dividers */
    --silver-300: #C7CBD1;     /* secondary borders, disabled */
    --silver-500: #8A9097;     /* muted text on dark bg, disabled states ONLY:
                                  3.2:1 on white, fails AA for small text */
    --steel-600: #6E747C;      /* muted/hint text on light (4.7:1 on white) */
    --steel-700: #171717;      /* body text on light, dark-section bg accents */
    --charcoal-900: #141414;   /* headings, footer/hero dark bg (near-black) */
    --brown-700: #5B3A1E;      /* secondary rule/accent (bark brown) */
    --gold-400: #7BC043;       /* leaf green: accents on dark, hover states */
    --gold-500: #4E8A2A;       /* primary green: CTA background (white text) */
    --gold-600: #3E6E21;       /* CTA hover/pressed */
    --gold-700: #3E6E21;       /* link/text green on light (6.0:1 on white) */
    --gold-100: #EAF3E2;       /* subtle callout background */

    /* semantic */
    --success: #1E7A38;  --success-bg: #E6F4EA;
    --danger:  #B42318;  --danger-bg:  #FDE8E6;

    --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-heading: 'Oswald', 'Arial Narrow', system-ui, sans-serif;
    --radius: 10px;
    --radius-sm: 6px;
    --shadow-card: 0 1px 3px rgba(23, 25, 28, .08), 0 4px 14px rgba(23, 25, 28, .06);
    --container-max: 1200px;
    --section-px: 20px;        /* 32px at >=768px */
    --call-bar-height: 56px;
}

/* ---------- reset ---------- */

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

* {
    margin: 0;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-sans);
    background: var(--white);
    color: var(--steel-700);
    font-size: 17px;
    line-height: 1.6;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    /* Long unbreakable tokens (emails, URLs) must wrap instead of escaping
       their container on narrow viewports. */
    overflow-wrap: break-word;
}

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

input, button, textarea, select {
    font: inherit;
}

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

/* ---------- typography ---------- */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--charcoal-900);
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

h1 { font-size: 2.1rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.2rem; }

/* Sharp 2px brown rule under section headings (secondary accent). */
.section-heading {
    display: inline-block;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--brown-700);
    margin-bottom: 20px;
}

p {
    color: var(--steel-700);
}

/* Links on light backgrounds need the darker gold to clear 4.5:1 (UX-M3);
   dark sections override with gold-400/silver per component. Hover never
   lightens: same color, underline appears. */
a {
    color: var(--gold-700);
    text-decoration: none;
}

a:hover {
    color: var(--gold-700);
    text-decoration: underline;
}

/* UX-M4: FocusOnNavigate focuses the page h1 on every navigation and Chromium
   treats that programmatic focus as focus-visible, so the ring survives until
   the user clicks elsewhere. Headings are not interactive: suppress the ring
   unconditionally (screen readers still announce the focused heading). */
h1:focus,
h1:focus-visible {
    outline: none;
    box-shadow: none;
}

/* ---------- forms ---------- */

.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}

.form-group label {
    font-weight: 600;
    font-size: 14px;
    color: var(--charcoal-900);
}

.form-input {
    /* 16px+ inputs prevent iOS zoom-on-focus (accessibility). */
    font-size: 16px;
    padding: 11px 12px;
    border: 1px solid var(--silver-300);
    border-radius: var(--radius-sm);
    background: var(--white);
    color: var(--charcoal-900);
    width: 100%;
}

.form-input:focus {
    outline: 2px solid var(--gold-400);
    outline-offset: 1px;
    border-color: var(--gold-400);
}

/* Field-level validation (UX-M5): every invalid field is marked at once,
   with its message adjacent to the input. */
.form-input-error {
    border-color: var(--danger);
}

.field-error {
    font-size: 13px;
    color: var(--danger);
}

.form-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
}

/* Side-by-side form fields get too narrow to read on phones (the quote-for
   customer picker collapsed to ~85px): stack them instead. */
@media (max-width: 560px) {
    .form-row {
        flex-direction: column;
        align-items: stretch;
    }
}

.checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--steel-700);
    cursor: pointer;
    min-height: 44px;
}

.form-checkbox {
    width: 18px;
    height: 18px;
    accent-color: var(--gold-500);
}

/* ---------- alerts ---------- */

.alert {
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    margin-bottom: 14px;
    font-size: 14px;
}

.alert-error {
    background: var(--danger-bg);
    color: var(--danger);
    border: 1px solid var(--danger);
}

.alert-success {
    background: var(--success-bg);
    color: var(--success);
    border: 1px solid var(--success);
}