/* ==========================================================================
   GCA Painting — Design Tokens
   Original color palette and type scale for GCA Painting. The structural
   approach used across this site (alternating section bands, card grids,
   badge/trust strips, single-CTA hero) is patterned after certapro.com's
   proven layout — but every color, type, and spacing value below is GCA's
   own and is not copied from any CertaPro brand asset.
   ========================================================================== */

:root {
  /* Color — brand */
  --color-brand-900: #13263D; /* deepest navy — dark section backgrounds */
  --color-brand-700: #1E3A5F; /* primary navy — headings, header/footer bg */
  --color-brand-500: #2F567F; /* mid navy — links, secondary UI */

  /* Color — accent (CTA) */
  --color-accent-600: #BD5C2A; /* accent hover/active */
  --color-accent-500: #D9713C; /* accent — primary CTA */
  --color-accent-100: #F6E2D3; /* accent tint — badge icons, highlights */

  /* Color — neutrals */
  --color-neutral-000: #FFFFFF;
  --color-neutral-050: #F5F3EF; /* warm off-white section background */
  --color-neutral-100: #E4E1DB;
  --color-neutral-300: #D8D4CC;
  --color-neutral-600: #5B5F66; /* muted text */
  --color-neutral-900: #22252A; /* body text */

  /* Color — feedback */
  --color-success-500: #3C7A5B;

  /* Typography
     NOTE: placeholder system-font stack. Swap in confirmed GCA brand
     typefaces once selected — nothing here should be treated as a locked
     brand decision. */
  --font-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --font-size-base: 1rem;   /* 16px */
  --font-size-sm: 0.875rem; /* 14px */
  --font-size-lg: 1.125rem; /* 18px */
  --font-size-xl: 1.5rem;   /* 24px */
  --font-size-2xl: 2rem;    /* 32px */
  --font-size-3xl: 2.75rem; /* 44px */

  --line-height-base: 1.6;
  --line-height-tight: 1.2;

  /* Spacing scale (8px baseline) */
  --space-1: 0.5rem; /* 8px */
  --space-2: 1rem;   /* 16px */
  --space-3: 1.5rem; /* 24px */
  --space-4: 2rem;   /* 32px */
  --space-5: 3rem;   /* 48px */
  --space-6: 4rem;   /* 64px */
  --space-7: 6rem;   /* 96px */

  /* Layout */
  --container-max: 1200px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;

  /* Shadow */
  --shadow-card: 0 2px 8px rgba(34, 37, 42, 0.08);
  --shadow-card-hover: 0 6px 16px rgba(34, 37, 42, 0.12);

  /*
    Breakpoints (reference only — plain CSS custom properties can't be
    consumed inside @media conditions, so these are the single source of
    truth for the literal values used throughout base.css / components.css):
      --bp-sm: 600px
      --bp-md: 768px
      --bp-lg: 992px
      --bp-xl: 1200px
  */
}