/*
 * cawood-tokens.css
 * -----------------
 * Canonical Cawood design tokens.
 *
 * This file is the single source of truth for brand values.
 * It is loaded by the child theme and provides --cw-* custom properties
 * on :root, available to all plugins on the page.
 *
 * HOW NEW MODULES SHOULD USE THIS:
 *   Option A (preferred) — reference tokens directly in your module CSS:
 *     .my-component { color: var(--cw-colour-coral, #FF6F61); }
 *   The fallback value (#FF6F61) ensures the component works in standalone
 *   dev environments where the child theme is not loaded.
 *
 *   Option B — map to a local prefix in your module's :root block:
 *     :root { --xyz-colour-coral: var(--cw-colour-coral, #FF6F61); }
 *   This keeps the module self-contained while still being overridable.
 *
 * NEVER hardcode brand hex values in module component CSS files.
 * If a brand value changes, it changes here only.
 *
 * TYPOGRAPHY:
 *   Exo 2 and Open Sans must be loaded via Google Fonts in the WordPress
 *   theme or plugin's wp_enqueue_scripts hook.
 */

:root {

  /* ── Colours ────────────────────────────────────────────────────────────── */
  --cw-colour-coral:      #FF6F61;   /* primary accent — buttons, highlights */
  --cw-colour-coral-soft: #FF9E94;   /* softer accent — hover states, errors on dark */
  --cw-colour-navy:       #1C2541;   /* dark backgrounds, dark text on light */
  --cw-colour-slate:      #3A506B;   /* body text on light backgrounds */
  --cw-colour-slate-mid:  #5B7FA6;   /* mid tone — chart lines */
  --cw-colour-cta:        #0CF57E;   /* CTA / highlight green — selected on dark */
  --cw-colour-light:      #F7F7F7;   /* light surface backgrounds */
  --cw-colour-white:      #FFFFFF;
  --cw-colour-border:     #DDE3EC;   /* subtle borders and dividers */
  --cw-colour-error:      #D9534F;   /* validation errors */

  /* ── Typography ─────────────────────────────────────────────────────────── */
  --cw-font-heading: "Exo 2", sans-serif;
  --cw-font-body:    "Open Sans", sans-serif;

  --cw-font-weight-light:   300;
  --cw-font-weight-regular: 400;
  --cw-font-weight-bold:    700;

  /* ── Spacing ────────────────────────────────────────────────────────────── */
  --cw-space-xs: 4px;
  --cw-space-sm: 8px;
  --cw-space-md: 16px;
  --cw-space-lg: 24px;
  --cw-space-xl: 40px;

  /* ── Border radius ──────────────────────────────────────────────────────── */
  --cw-radius-sm: 4px;
  --cw-radius-md: 8px;
  --cw-radius-lg: 12px;

  /* ── Transitions ────────────────────────────────────────────────────────── */
  --cw-transition: 0.2s ease;

  /* ── Form inputs — shared input field standard ──────────────────────────── */
  --cw-input-border:      2px solid var(--cw-colour-border);
  --cw-input-padding:     14px 16px;
  --cw-input-padding-left: 21px;   /* extra left indent to match browser select indent */
  --cw-input-min-height:  54px;
  --cw-input-focus-shadow: 0 0 0 3px rgba(255, 111, 97, 0.15);

}