/* ==========================================================================
   The British Roofer - Design palette tokens (single source of truth)
   --------------------------------------------------------------------------
   --rb-slate     #36454F   Charcoal Slate   - dominant surface, headings, icons
   --rb-slate-dark #2B363E  Slate shade      - CTA hover and active states
   --rb-amber     #FFB300   Industrial Amber - sparing accent (small states only)
   --rb-ink       #1C1C1C   Ink              - deep neutral / dark text
   --rb-muted     #6B7880   Muted slate      - placeholders, secondary text
   --rb-slate-50  slate at ~50% alpha        - translucent slate fills
   --rb-amber-70  amber at ~70% alpha        - translucent amber fills

   This is the only place where palette hex values are declared. Every other
   stylesheet - the industrial style layer, the Elementor global kit colours,
   the generated per-element CSS and the page level inline styles - must
   reference these tokens through var(--rb-*).

   Loaded in <head> on every page, immediately before
   roofer-industrial-theme.css.
   ========================================================================== */

:root {
  /* @group colors */
  --color-primary: #36454F;        /* Primary */
  --color-primary-dark: #2B363E;   /* Primary Dark */
  --color-primary-light: #40505B;  /* Primary Light */
  --color-secondary: #4C5C68;      /* Secondary */
  --color-accent: #FFB300;         /* Accent */
  --color-cta: #FFB300;            /* CTA */
  --color-cta-dark: #E09E00;       /* CTA Dark */
  --color-cta-light: #FFC24D;      /* CTA Light */
  --color-bg: #36454F;             /* Background */
  --color-surface: #2B363E;        /* Surface */
  --color-text: #F4F6F7;           /* Text */
  --color-text-secondary: #C7D0D6; /* Secondary Text */
  --color-text-muted: #9AA7B0;     /* Muted Text */
  --color-border: #4C5C68;         /* Border */
  --color-ink: #1C1C1C;            /* Ink On CTA */

  /* @group fonts */
  --font-heading: 'Anton', 'Arial Narrow', Impact, sans-serif; /* Heading Font */
  --font-body: 'Lato', 'Helvetica Neue', Arial, sans-serif;    /* Body Font */
  --font-weight-heading: 400;      /* Heading Weight */

  /* @group borderRadius */
  --radius-sm: 2px;                /* Small Radius */
  --radius-md: 4px;                /* Medium Radius */
  --radius-lg: 8px;                /* Large Radius */

  /* @group spacing */
  --spacing-sm: 12px;              /* Small Spacing */
  --spacing-base: 24px;            /* Base Spacing */
  --spacing-lg: 56px;              /* Large Spacing */
}

/* Legacy palette aliases. The imported Elementor pages and
   roofer-industrial-theme.css still reference var(--rb-*); these aliases keep
   those references resolving to the Charcoal Slate / Industrial Amber palette. */
:root,
.elementor-kit-1215 {
  --rb-slate: var(--color-primary);
  --rb-slate-dark: var(--color-primary-dark);
  --rb-amber: var(--color-cta);
  --rb-ink: var(--color-ink);
  --rb-muted: #6B7880;
  --rb-slate-50: #36454F82;
  --rb-amber-70: #FFB300B3;
}