/* ==========================================================================
   Amplified — Colour tokens
   Source of truth: getamplified.co.uk brand tokens.
   Deep teal darks + electric yellow accents. High contrast, impossible to ignore.
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------
     Brand primitives — raw palette
     ------------------------------------------------------------------ */

  /* Teals (core brand darks) */
  --amp-teal-950: #001A1F;   /* deepest — footers, overlays */
  --amp-teal-900: #00262D;   /* primary brand dark — hero & section backgrounds */
  --amp-teal-800: #003D47;   /* raised dark surfaces, cards on dark */
  --amp-teal-600: #36646C;   /* muted teal — secondary UI, borders on dark */
  --amp-teal-200: #AFD4DA;   /* light teal — soft accents, tints, dividers */

  /* Yellows (brand accents) */
  --amp-yellow-500: #E0E138; /* primary accent — buttons, CTAs, highlights, headlines */
  --amp-yellow-600: #C4C520; /* accent hover/pressed */

  /* Slate (text on light) */
  --amp-slate-800: #324158;  /* body copy on light backgrounds; wordmark navy */

  /* Neutrals */
  --amp-white: #FFFFFF;
  --amp-neutral-100: #F3F3F3; /* light section backgrounds */
  --amp-neutral-400: #B0B0B0; /* disabled, placeholder */
  --amp-black: #000000;

  /* ------------------------------------------------------------------
     Semantic colour tokens (light context — default)
     ------------------------------------------------------------------ */

  --color-background: var(--amp-white);
  --color-background-subtle: var(--amp-neutral-100);
  --color-background-brand: var(--amp-teal-900);

  --color-text: var(--amp-slate-800);
  --color-text-muted: var(--amp-teal-600);
  --color-text-inverse: var(--amp-white);

  --color-heading: var(--amp-teal-900);

  --color-accent: var(--amp-yellow-500);
  --color-accent-hover: var(--amp-yellow-600);
  --color-accent-contrast: var(--amp-teal-900); /* text on yellow */

  --color-link: var(--amp-teal-800);
  --color-link-hover: var(--amp-teal-600);

  --color-border: var(--amp-teal-200);
  --color-border-strong: var(--amp-teal-600);

  --color-focus-ring: var(--amp-yellow-500);

  /* Buttons */
  --button-primary-bg: var(--amp-yellow-500);
  --button-primary-bg-hover: var(--amp-yellow-600);
  --button-primary-text: var(--amp-teal-900);
  --button-secondary-bg: transparent;
  --button-secondary-border: var(--amp-teal-900);
  --button-secondary-text: var(--amp-teal-900);
}

/* --------------------------------------------------------------------
   Dark brand context — deep teal sections (hero, footer, feature bands).
   Apply .theme-dark (or data-theme="dark") to any section on teal.
   -------------------------------------------------------------------- */

.theme-dark,
[data-theme='dark'] {
  --color-background: var(--amp-teal-900);
  --color-background-subtle: var(--amp-teal-800);

  --color-text: var(--amp-white);
  --color-text-muted: var(--amp-teal-200);
  --color-text-inverse: var(--amp-slate-800);

  --color-heading: var(--amp-yellow-500);

  --color-link: var(--amp-yellow-500);
  --color-link-hover: var(--amp-yellow-600);

  --color-border: var(--amp-teal-600);
  --color-border-strong: var(--amp-teal-200);

  --button-secondary-border: var(--amp-white);
  --button-secondary-text: var(--amp-white);
}