/* Suncastle Roofing — Color tokens
   Sourced from the live site (Ronneby theme). Primary crimson #a4051b,
   commercial bright-red #d6181f, gold accent, charcoal neutrals. */
:root {
  /* ---- Brand reds ---- */
  --red-800: #6e0312;
  --red-700: #8a0416;
  --red-600: #a4051b; /* PRIMARY brand crimson */
  --red-500: #d6181f; /* bright red — commercial / hover accents */
  --red-100: #f7e2e4; /* tint for soft fills */

  /* ---- Gold / sun accent ---- */
  --gold-600: #d39a26;
  --gold-500: #f9c043; /* primary gold accent (button hover, highlights) */
  --gold-400: #edc84d;
  --gold-100: #fbeecb;

  /* ---- Neutrals (warm charcoal) ---- */
  --charcoal-900: #1f1f1f;
  --charcoal-800: #2d2d2d; /* footer bar, dark sections */
  --charcoal-700: #333333;
  --gray-600: #424242;
  --gray-500: #767676;
  --gray-400: #9a9a9a;
  --gray-300: #c7c7c7;
  --gray-200: #e0e0e0; /* hairline borders */
  --gray-100: #f3f2ef; /* warm off-white surface */
  --white: #ffffff;

  /* warm taupe pulled from the brand subheads / seals */
  --taupe-500: #948f79;
  --cream: #f7f4ee;

  /* ---- Semantic aliases ---- */
  --brand-primary: var(--red-600);
  --brand-primary-strong: var(--red-700);
  --brand-secondary: var(--red-500);
  --brand-accent: var(--gold-500);

  /* ---- 70 / 25 / 5 color usage model ----
     Neutrals carry ~70% of any surface (page/section backgrounds, text,
     borders). Gold is the graphic accent ~25% (icon rings, dividers, accent
     bars, indicators, highlights, hover fills). Crimson is reserved for
     calls-to-action ONLY ~5% (primary buttons, submit). Reach for these role
     aliases — not the raw brand colors — so the ratio holds. */
  --accent-graphic: var(--gold-500);      /* gold for shapes on dark / large fills */
  --accent-graphic-ink: var(--gold-600);  /* legible gold for small marks on light */
  --accent-graphic-soft: var(--gold-100); /* soft gold tint for icon backings */
  --cta: var(--red-600);
  --cta-hover: var(--red-700);

  --text-heading: var(--charcoal-900);
  --text-body: var(--charcoal-800);
  --text-muted: var(--gray-500);
  --text-on-dark: var(--white);
  --text-on-brand: var(--white);
  --text-link: var(--red-600);

  --surface-page: var(--white);
  --surface-alt: var(--gray-100);
  --surface-dark: var(--charcoal-800);
  --surface-brand: var(--red-600);
  --surface-card: var(--white);

  --border-subtle: var(--gray-200);
  --border-strong: var(--charcoal-800);
  --border-on-dark: rgba(255, 255, 255, 0.22);

  /* states */
  --focus-ring: rgba(164, 5, 27, 0.35);

  /* status (utility) */
  --success: #2e7d32;
  --warning: var(--gold-600);
  --danger: var(--red-500);
}