/* Inman's Electricals — design tokens.
   Charcoal surfaces, white typography and the original logo colours.
   Green guides enquiries; red identifies emergency help. */

:root {
    color-scheme: dark;

    /* Charcoal foundation */
    --ink: #101110;
    --ink-raised: #1E211D;
    --ink-line: #262924;
    --ink-line-soft: #3A4432;
    --ink-wash: #161A14;

    /* Brand greens — original pigment retained, lighter tones for contrast */
    --green: #5D9331;         /* primary action on paper */
    --green-bright: #74B33D;  /* primary action on ink (contrast lift) */
    --green-deep: #8FBF5E;    /* links + eyebrows on paper */
    --green-pale: #8FBF5E;    /* eyebrows on ink */
    --green-wash: #222E1B;    /* badge fill */
    --green-wash-line: #425638;
    --green-wash-hover: #2E3E24;

    /* Signal red — emergency surfaces and calls to action */
    --red: #CF2128;

    /* Surfaces */
    --paper: #101110;
    --card: #1E211D;
    --line: #343A31;
    --line-strong: #596151;

    /* Text on charcoal */
    --text: #F6F5F2;
    --text-body: #C1C4BC;
    --text-muted: #A2A89B;

    /* Text on ink */
    --on-ink: #F6F5F2;
    --on-ink-body: #B9BAB4;
    --on-ink-muted: #8B8E88;
    --on-ink-nav: #D4D5D0;

    /* Semantic aliases — keep the scaffolded alerts/forms CSS resolving */
    --color-primary: var(--green-bright);
    --color-primary-hover: var(--green-bright);
    --color-secondary: var(--text-muted);
    --color-success: var(--green);
    --color-warning: #C9762F;
    --color-error: #FF8589;
    --color-info: var(--green-deep);
    --bg-primary: var(--paper);
    --bg-secondary: var(--card);
    --bg-tertiary: var(--paper);
    --text-primary: var(--text);
    --text-secondary: var(--text-body);
    --border-color: var(--line);

    /* Borders — square-ish; the brand reads as trade, not tech */
    --border-radius: 4px;
    --border-radius-sm: 2px;
    --border-radius-lg: 4px;

    /* Spacing — steps of 8 */
    --space-xs: 8px;
    --space-sm: 16px;
    --space-md: 24px;
    --space-lg: 32px;
    --space-xl: 48px;
    --space-2xl: 72px;
    --space-3xl: 96px;

    /* Typography — Archivo throughout */
    --font-sans: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-mono: ui-monospace, "Cascadia Code", "Fira Code", monospace;

    --font-size-eyebrow: 13px;
    --font-size-sm: 14px;
    --font-size-base: 16px;
    --font-size-body: 17px;
    --font-size-lg: 18px;
    --font-size-xl: 20px;
    --font-size-2xl: 22px;
    --font-size-card: 26px;
    --font-size-section: clamp(30px, 4vw, 40px);
    --font-size-display: clamp(38px, 6.4vw, 66px);

    --tracking-eyebrow: 0.16em;
    --tracking-display: -0.035em;
    --tracking-section: -0.025em;

    /* Layout */
    --container-max: 1200px;
    --gutter: 24px;
    /* Minimum height of the header bar itself. .header__inner consumes this. */
    --header-height: 80px;
    /* How far anything must travel to clear the header. Kept separate from
       --header-height on purpose: the header's real height is content-driven,
       so main.js measures it and overwrites this. Writing the measurement back
       into --header-height instead would feed the header's own min-height and
       grow it on every observation. */
    --header-offset: var(--header-height);
    /* Height of the sticky emergency banner in its compact state. Anchor
       offsets depend on it — see scroll-padding-top in reset.css. */
    --emergency-height: 60px;

    /* Minimum touch target — the phone number is a tap target on every screen */
    --tap-min: 48px;
}

@media (min-width: 900px) {
    :root {
        --gutter: 40px;
    }
}