/* =========================================================================
   Chew Consultants — Design tokens
   Palette B+ / R1 (Modern advisory: slate + gold)
   Typography D (IBM Plex Sans + IBM Plex Serif)

   R1 update (4 May 2026): accent swapped from sage (#6B8E68) to a warm gold
   (#C9A876) sampled from the brand logo. Pairs with the slate primary and
   matches the logo's own colour for visual coherence.

   Tokens are exposed as CSS custom properties (--name) so they can be
   referenced from GenerateBlocks Global Styles, theme.json, or per-block CSS
   without having to hunt down hex values.

   GenerateBlocks already uses --accent, --base-3 etc. as default global
   colour names. We reassign those to our brand colours so existing Capital
   blocks (Contact, Style Guide pages) instantly pick up the new palette
   without needing to be rebuilt one-by-one.
   ========================================================================= */

:root {

  /* ----- Colour: brand --------------------------------------------------- */
  --cc-primary:           #2C3E50;  /* Slate — primary brand colour, headings, navigation */
  --cc-primary-tint:      #3D5168;  /* Slate, +12% lightness, for hovers */
  --cc-primary-shade:     #1F2C3A;  /* Slate, -12% lightness, for active/pressed */

--cc-accent:            #C9A876;  /* Warm gold — DECORATIVE only (button bg, icons, dividers, dark backgrounds). Do not use for text on light backgrounds. */
  --cc-accent-tint:       #D6B98E;  /* Gold hover */
  --cc-accent-shade:      #A88B5D;  /* Gold active */
  --cc-link:              #8B6F3E;  /* Dark gold — accessible link colour, AA-compliant on white (~4.8:1). Use for text where contrast matters. */
  --cc-link-hover:        #6F5730;  /* Darker on hover */

  --cc-secondary:         #94A3B8;  /* Cool grey — supporting text, dividers, icon backgrounds */

  /* ----- Colour: neutrals ----------------------------------------------- */
  --cc-bg:                #FFFFFF;  /* Page background */
  --cc-bg-soft:           #F7F9FB;  /* Section background, alternate stripe */
  --cc-bg-muted:          #EEF2F6;  /* Card background, code blocks */

  --cc-text:              #1A202C;  /* Body text — high contrast on white */
  --cc-text-muted:        #4A5568;  /* Secondary text — meta, captions */
--cc-text-subtle:       #5A6878;  /* Tertiary text — darker for AA compliance (~5.3:1 on white) */

  --cc-border:            #E2E8F0;  /* Dividers, card borders */

  /* ----- Colour: state -------------------------------------------------- */
  --cc-success:           #2F855A;
  --cc-warning:           #B7791F;
  --cc-danger:            #C53030;

  /* ----- Typography: families ------------------------------------------- */
  --cc-font-sans:         "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --cc-font-serif:        "IBM Plex Serif", Georgia, "Times New Roman", serif;
  --cc-font-mono:         "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ----- Typography: scale (Major Third = 1.25x) ------------------------ */
  --cc-text-xs:           0.75rem;   /* 12px */
  --cc-text-sm:           0.875rem;  /* 14px */
  --cc-text-base:         1rem;      /* 16px — body */
  --cc-text-lg:           1.125rem;  /* 18px — lead paragraph */
  --cc-text-xl:           1.25rem;   /* 20px — H6 */
  --cc-text-2xl:          1.5rem;    /* 24px — H5 */
  --cc-text-3xl:          1.875rem;  /* 30px — H4 */
  --cc-text-4xl:          2.25rem;   /* 36px — H3 */
  --cc-text-5xl:          2.875rem;  /* 46px — H2 */
  --cc-text-6xl:          3.5rem;    /* 56px — H1 / hero */

  /* ----- Typography: weights ------------------------------------------- */
  --cc-fw-regular:        400;
  --cc-fw-medium:         500;
  --cc-fw-semibold:       600;
  --cc-fw-bold:           700;

  /* ----- Typography: line height --------------------------------------- */
  --cc-lh-tight:          1.15;   /* Display headings */
  --cc-lh-snug:           1.3;    /* Subheadings */
  --cc-lh-normal:         1.6;    /* Body */
  --cc-lh-relaxed:        1.75;   /* Long-form reading */

  /* ----- Spacing: 4px base ---------------------------------------------- */
  --cc-space-1:           0.25rem;   /*  4px */
  --cc-space-2:           0.5rem;    /*  8px */
  --cc-space-3:           0.75rem;   /* 12px */
  --cc-space-4:           1rem;      /* 16px */
  --cc-space-6:           1.5rem;    /* 24px */
  --cc-space-8:           2rem;      /* 32px */
  --cc-space-12:          3rem;      /* 48px */
  --cc-space-16:          4rem;      /* 64px */
  --cc-space-24:          6rem;      /* 96px */

  /* ----- Layout --------------------------------------------------------- */
  --cc-container-narrow:  720px;
  --cc-container-base:    1080px;
  --cc-container-wide:    1280px;

  /* ----- Radius --------------------------------------------------------- */
  --cc-radius-sm:         4px;
  --cc-radius-md:         8px;
  --cc-radius-lg:         16px;
  --cc-radius-pill:       999px;

  /* ----- Shadow --------------------------------------------------------- */
  --cc-shadow-sm:         0 1px 2px rgba(15, 23, 42, 0.06);
  --cc-shadow-md:         0 4px 12px rgba(15, 23, 42, 0.08);
  --cc-shadow-lg:         0 12px 32px rgba(15, 23, 42, 0.10);


  /* =========================================================================
     OVERRIDE GenerateBlocks / Capital starter tokens with brand values.
     This makes existing Capital blocks pick up the new palette without
     needing to be re-edited block by block.
     ========================================================================= */
  --contrast:             var(--cc-text);          /* was #0e0e0e */
  --contrast-2:           var(--cc-text-muted);    /* was #353535 */
  --contrast-3:           var(--cc-text-subtle);   /* was #8d9297 */
  --base:                 var(--cc-border);        /* was #e6e6e6 */
  --base-2:               var(--cc-bg-soft);       /* was #f8f8f8 */
  --base-3:               var(--cc-bg);            /* white — unchanged */
  --accent:               var(--cc-accent);        /* was #d32525 (Capital red) — now warm gold */
  --accent-2:             var(--cc-primary);       /* was #5d9368 (Capital green) — now slate */
}


/* =========================================================================
   Base type styles
   ========================================================================= */

body {
  font-family: var(--cc-font-sans);
  font-size: var(--cc-text-base);
  font-weight: var(--cc-fw-regular);
  line-height: var(--cc-lh-normal);
  color: var(--cc-text);
  background-color: var(--cc-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--cc-font-serif);
  font-weight: var(--cc-fw-semibold);
  line-height: var(--cc-lh-tight);
  color: var(--cc-primary);
  margin-top: 0;
}

h1 { font-size: var(--cc-text-6xl); }
h2 { font-size: var(--cc-text-5xl); line-height: var(--cc-lh-snug); }
h3 { font-size: var(--cc-text-4xl); line-height: var(--cc-lh-snug); }
h4 { font-size: var(--cc-text-3xl); line-height: var(--cc-lh-snug); }
h5 { font-size: var(--cc-text-2xl); line-height: var(--cc-lh-snug); }
h6 { font-size: var(--cc-text-xl); line-height: var(--cc-lh-snug); font-family: var(--cc-font-sans); text-transform: uppercase; letter-spacing: 0.04em; }

@media (max-width: 768px) {
  h1 { font-size: var(--cc-text-5xl); }
  h2 { font-size: var(--cc-text-4xl); }
  h3 { font-size: var(--cc-text-3xl); }
  h4 { font-size: var(--cc-text-2xl); }
}

a {
  color: var(--cc-link);
  ...
}
a:hover,
a:focus {
  color: var(--cc-link-hover);
}


/* =========================================================================
   Buttons (override GeneratePress / GenerateBlocks defaults where appropriate)
   ========================================================================= */

.button,
button.wp-block-button__link,
.wp-block-button__link {
  background-color: var(--cc-accent);
  color: var(--cc-primary);
  border: none;
  border-radius: var(--cc-radius-pill);
  padding: var(--cc-space-3) var(--cc-space-8);
  font-family: var(--cc-font-sans);
  font-weight: var(--cc-fw-semibold);
  font-size: var(--cc-text-base);
  text-decoration: none;
  transition: background-color 120ms ease;
}

.button:hover,
.wp-block-button__link:hover,
button.wp-block-button__link:hover {
  background-color: var(--cc-accent-shade);
}

/* Secondary / outline button — apply class .button--secondary */
.button--secondary,
.is-style-outline .wp-block-button__link {
  background-color: transparent;
  color: var(--cc-primary);
  border: 1.5px solid var(--cc-primary);
}
.button--secondary:hover,
.is-style-outline .wp-block-button__link:hover {
  background-color: var(--cc-primary);
  color: var(--cc-bg);
}