/*---------------------------------------------------------------------
File Name: tokens.css
Site-wide design tokens (colors, spacing, radius, shadow, type).
Loaded first on every page so every other stylesheet can use them.

Brand motif (logo palette):
  blue      #0000ff  — primary brand accent (links, highlights, small accents)
  red       #ff0000  — primary call-to-action / "Request a Quote"
  charcoal  #232323  — header, footer, dark sections (logo background)

Pure #0000ff vibrates as a large fill, so big areas (headers, buttons,
footer) use the deepened --brand-blue-deep; pure --brand-blue is reserved
for links, small accents, and highlights. Everything below is referenced
through tokens — avoid hardcoding hex in other stylesheets so the whole
theme can be retuned from this one file.
---------------------------------------------------------------------*/

:root {
    /* ---- Raw brand colors (from the logo) ---- */
    --brand-blue:       #0000ff;   /* pure logo blue — accents/links only */
    --brand-red:        #ff0000;   /* pure logo red  — primary CTA        */
    --brand-charcoal:   #232323;   /* logo background — dark surfaces      */

    /* ---- Blue scale (deepened for large/readable areas) ---- */
    --navy:        #0a1a8c;   /* primary headings / large fills (deep blue) */
    --navy-700:    #0713a8;   /* gradient partner / hover                   */
    --navy-600:    #1b2bb5;   /* lighter step                               */
    --accent:      #0000ff;   /* links, borders, highlights (pure blue)     */
    --accent-600:  #0000cc;   /* link hover (slightly deepened)             */

    /* ---- Action / status ---- */
    --cta:         #ff0000;   /* primary call-to-action (red)        */
    --cta-700:     #cc0000;   /* CTA hover                           */
    --danger:      #cc0000;   /* error text                          */
    --success:     #0a7d3c;   /* form-success confirmation message   */

    /* ---- Dark surfaces (charcoal) ---- */
    --charcoal:      #232323;
    --charcoal-700:  #1a1a1a;  /* deeper charcoal for gradient/borders */
    --charcoal-600:  #2e2e2e;  /* lifted charcoal panel                */

    /* ---- Neutrals ---- */
    --ink:         #1f2937;   /* primary body text */
    --ink-soft:    #475569;   /* secondary text   */
    --ink-faint:   #64748b;   /* captions / notes  */
    --line:        #e2e8f0;   /* hairline borders  */
    --surface:     #ffffff;
    --surface-tint:#f4f6ff;   /* very light blue wash */

    /* ---- Tints used for soft panels / section backgrounds ---- */
    --wash-1:      #eef1ff;
    --wash-2:      #e4e9ff;

    /* ---- On-dark text (used over charcoal surfaces) ---- */
    --on-dark:        #ffffff;
    --on-dark-soft:   #c9ccd6;  /* muted text on charcoal */
    --on-dark-faint:  #9aa0ad;  /* faint text on charcoal */

    /* ---- Brand gradient, brightened for legibility on dark surfaces.
            (Pure #0000ff/#ff0000 are too dark to read on charcoal.) ---- */
    --grad-brand-bright: linear-gradient(90deg, #5b7cff 0%, #ff5b5b 100%);

    /* ---- Radius ---- */
    --r-sm: 6px;
    --r-md: 10px;
    --r-lg: 16px;
    --r-pill: 999px;

    /* ---- Shadows ---- */
    --shadow-sm: 0 2px 8px rgba(10, 26, 140, 0.08);
    --shadow-md: 0 6px 20px rgba(10, 26, 140, 0.10);
    --shadow-lg: 0 14px 40px rgba(10, 26, 140, 0.16);

    /* ---- Gradients ---- */
    --grad-navy:     linear-gradient(135deg, #0a1a8c 0%, #1b2bb5 100%);  /* deep-blue */
    --grad-charcoal: linear-gradient(135deg, #232323 0%, #1a1a1a 100%);  /* dark sections */
    --grad-wash:     linear-gradient(135deg, var(--wash-1) 0%, var(--wash-2) 100%);

    /* ---- Type ---- */
    --font-sans: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

    /* ---- Layout ---- */
    --page-pad-x: clamp(20px, 8vw, 120px);
    --maxw: 1180px;
}