/* Repair Hi Plus — Color tokens
   Deep navy ink + a single restrained gold accent over a warm cream field.
   Base palette + semantic aliases. Navy and cream carry the system;
   gold is a rare seasoning. Navy text on gold — never white on gold. */
:root {
  /* —— Brand palette —— */
  --navy: #041C37;          /* primary ink: headlines, buttons, nav, footers, body */
  --navy-hover: #0A2A4D;    /* primary hover (half-step lighter) */
  --gold: #CEA678;          /* signature accent: highlights, dividers, key CTAs */
  --gold-hover: #BC9362;    /* accent hover */
  --slate: #4A5A6B;         /* muted supporting text, secondary nav */
  --tertiary: #E4E1D8;      /* warm light: borders, dividers */
  --cream: #F5F4EF;         /* default warm page background */
  --white: #FFFFFF;         /* raised surfaces: cards, inputs */
  --muted: #8A95A1;         /* low-emphasis metadata, captions, helper text */

  /* —— Navy tints (focus rings, soft fills, shadows) —— */
  --navy-100: rgba(4, 28, 55, 0.10);
  --navy-12:  rgba(4, 28, 55, 0.12);
  --navy-08:  rgba(4, 28, 55, 0.08);
  --navy-04:  rgba(4, 28, 55, 0.04);
  --gold-12:  rgba(206, 166, 120, 0.16);

  /* —— Status —— */
  --error:   #B23A3A;       /* muted brick red */
  --success: #2E7D5B;       /* booked/completed */
  --warning: #C8902F;       /* tuned toward gold */
  --info:    #2E6396;       /* drawn from navy family */

  /* —— Semantic surface/text aliases —— */
  --color-bg: var(--cream);
  --surface: var(--white);
  --surface-sunken: var(--cream);
  --surface-raised: var(--white);

  --color-primary: var(--navy);
  --color-primary-hover: var(--navy-hover);
  --color-accent: var(--gold);
  --color-accent-hover: var(--gold-hover);
  --on-accent: var(--navy);          /* navy text on gold */
  --on-primary: var(--white);        /* white text on navy */

  --text-strong: var(--navy);        /* on-surface default */
  --text-body: var(--navy);
  --text-secondary: var(--slate);
  --text-muted: var(--muted);
  --text-on-dark: var(--cream);

  --border: var(--tertiary);
  --divider: var(--tertiary);
  --focus-ring: 0 0 0 3px var(--navy-100);
}
