/* ============================================================
   Design tokens — Silver Sea Marine Services & Supply
   Colors, spacing, typography, shadows. Single source of truth.
   ============================================================ */

:root {
    /* --- Colors: brand & UI --- */
    --color-primary: #006ece;   /* top bar / primary blue */
    --color-cta: #0052ea;       /* welcome button */
    --color-accent: #221fd3;    /* links, selection, accents */
    --color-nav: #165b97;       /* sub-menu background */
    --color-nav-hover: #03058b; /* sub-menu hover text */
    --color-footer: #1871bf;    /* footer + widget area */

    --color-text: #0a0000;      /* body text */
    --color-text-strong: #020202; /* headings / entry titles */
    --color-heading: #000000;   /* section widget titles */
    --color-muted: #789bbf;     /* tagline */
    --color-muted-light: #f2f2f2;
    --color-muted-lighter: #efefef;
    --color-light: #ffffff;
    --color-skill: #eeee22;     /* skills accent (legacy) */
    --color-shadow-btn: #c2503d;

    /* --- Typography --- */
    --font-primary: "Raleway", sans-serif;
    --fs-h1: 33px;
    --fs-h2: 33px;
    --fs-h3: 22px;
    --fs-h4: 18px;
    --fs-h5: 16px;
    --fs-h6: 14px;
    --fs-body: 14px;
    --fs-nav: 16px;
    --fs-title: 27px;           /* site-title in top bar */
    --fs-title-mobile: 20px;    /* site-title on small screens */

    /* --- Spacing --- */
    --spacing-band: 25px;       /* branding / nav vertical padding */
    --spacing-gutter: 25px;     /* menu toggle margin */
    --spacing-logo: 12px;       /* gap between logo and title */
    --spacing-ratio: 1.5;

    /* --- Shadows --- */
    --shadow-btn: 0 5px 0 var(--color-cta);
    --shadow-btn-active: 0 2px 0 var(--color-cta);
    --shadow-cta: 0 5px 0 var(--color-shadow-btn);
}