/* ==========================================================================
   Support Nest — Colour tokens
   Built on the 60–30–10 brand rule:
     60% Primary  #0274BE  (trust, professionalism)
     30% Secondary #FFA37B (warmth, approachability)
     10% Accent   #000000  (grounding, contrast)
   ========================================================================== */

:root {
  /* --- Brand core -------------------------------------------------------- */
  --brand-blue: #0274be;      /* Primary — 60% */
  --brand-peach: #ffa37b;     /* Secondary — 30% */
  --brand-ink: #000000;       /* Accent — 10% */

  /* --- Brand tints & shades (derived, harmonious) ------------------------ */
  --blue-900: #023f66;
  --blue-800: #024f7f;
  --blue-700: #025f99;
  --blue-600: #0274be;        /* = brand-blue */
  --blue-500: #1f8ad4;
  --blue-400: #4fa5de;
  --blue-300: #8cc4ea;
  --blue-200: #c2e0f4;
  --blue-100: #e4f1fa;
  --blue-50:  #f2f8fd;

  --peach-700: #d97a4f;
  --peach-600: #f2895f;
  --peach-500: #ffa37b;       /* = brand-peach */
  --peach-400: #ffb896;
  --peach-300: #ffceb5;
  --peach-200: #ffe2d4;
  --peach-100: #fff1ea;
  --peach-50:  #fff8f4;

  /* --- Neutrals ---------------------------------------------------------- */
  --white: #ffffff;
  --grey-50:  #fafafa;
  --grey-100: #f4f4f3;
  --grey-200: #dddddc;        /* Light Grey (brand supporting) */
  --grey-300: #c7c7c6;
  --grey-400: #a3a3a2;
  --grey-500: #787877;
  --grey-600: #565655;
  --grey-700: #3d3d3c;
  --grey-800: #262625;
  --grey-900: #141413;
  --black: #000000;

  /* --- Semantic status --------------------------------------------------- */
  --success: #2e9d6e;
  --success-bg: #e6f5ee;
  --warning: #e8a33d;
  --warning-bg: #fcf3e2;
  --danger: #d64b47;
  --danger-bg: #fbecec;
  --info: var(--blue-600);
  --info-bg: var(--blue-100);

  /* ======================================================================
     Semantic aliases — reference these in components, not raw scales
     ====================================================================== */

  /* Surfaces */
  --surface-page: var(--white);
  --surface-subtle: var(--grey-100);
  --surface-card: var(--white);
  --surface-inverse: var(--blue-900);
  --surface-brand: var(--brand-blue);
  --surface-brand-soft: var(--blue-100);
  --surface-warm: var(--peach-100);
  --surface-warm-solid: var(--brand-peach);

  /* Text */
  --text-strong: var(--grey-900);
  --text-body: var(--grey-700);
  --text-muted: var(--grey-500);
  --text-on-brand: var(--white);
  --text-on-warm: var(--grey-900);
  --text-brand: var(--blue-700);
  --text-link: var(--blue-600);

  /* Borders */
  --border-subtle: var(--grey-200);
  --border-default: var(--grey-300);
  --border-strong: var(--grey-400);
  --border-brand: var(--brand-blue);
  --focus-ring: color-mix(in srgb, var(--brand-blue) 45%, transparent);
}