/*
 * tokens.css — CSS custom properties (design tokens)
 * Black Canyon Exteriors
 * No build step — plain CSS, loaded before main.css
 */
:root {
    /* Brand */
    --color-primary:      #F26522;
    --color-primary-dark: #D94E10;
    --color-secondary:    #000000;
    --color-bg:           #FFFFFF;
    --color-text:         #1A1A1A;
    --color-text-muted:   #5A5A5A;
    --color-border:       #D0D0D0;
    --color-surface:      #F7F7F7;
    --color-surface-strong:#F1F1F1;   /* 911it-style light section bg on cards-over-bg */
    --color-surface-card:  #FFFFFF;   /* cards over --color-surface */
    --color-onyx:          #0E0E0E;   /* near-black for closing contact band */
    --color-error:        #B00020;
    --color-error-bg:     #FFF0F0;
    --color-success:      #1B5E20;
    --color-success-bg:   #F0FFF4;
    --color-focus:        #F26522;

    /* Typography — system font stack, no web fonts loaded
       Inter is listed first so it picks up if the OS has it (macOS, recent
       Linux), falls back to the native system UI stack otherwise. */
    --font-body:       "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-heading:    var(--font-body);
    --font-size-sm:    0.875rem;
    --font-size-base:  1rem;      /* body */
    --font-size-lg:    1.125rem;  /* lead / H3 */
    --font-size-xl:    1.375rem;
    --font-size-2xl:   1.875rem;
    --font-size-3xl:   2.75rem;

    /* Fluid heading scale — clamp between mobile min and desktop max */
    --font-size-h1:    clamp(2rem, 4vw, 3rem);
    --font-size-h2:    clamp(1.5rem, 3vw, 2.25rem);
    --font-size-h3:    1.25rem;
    --font-size-lead:  1.125rem;

    /* 911it-style oversized heading scale (used in redesign partials) */
    --font-size-h1-xl: clamp(2.25rem, 4.5vw, 3.5rem);
    --font-size-h2-xl: clamp(1.75rem, 3.5vw, 2.5rem);
    --font-size-body-lg: 1.0625rem;  /* 17px body for content-dense pages */

    /* Fluid section padding — adapts from 4rem (mobile) to 6rem (desktop) */
    --section-padding: clamp(4rem, 8vw, 6rem);

    /* Spacing — 4px base unit */
    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-6:  1.5rem;
    --space-8:  2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;

    /* Layout */
    --container-max: 72rem;
    --radius-sm:     2px;
    --radius:        4px;
    --radius-lg:     8px;
    --radius-xl:     16px;   /* 911it card corners */
    --radius-2xl:    20px;   /* hero + guide-band cards */
    --shadow-card:      0 1px 3px rgba(0,0,0,.05), 0 4px 12px rgba(0,0,0,.04);
    --shadow-card-hover:0 4px 8px rgba(0,0,0,.06), 0 12px 28px rgba(0,0,0,.08);
    --shadow-focus:     0 0 0 3px rgba(242,101,34,.35);
    --transition-fast:  150ms ease;
    --transition-smooth:180ms ease;
}