/* ===========================================================================
   Banooyi — Color tokens
   Gentle, feminine, calm. Vivid purple brand + gold accent on a soft lilac bg.
   =========================================================================== */

:root {
  /* ---- Brand: purple ---- */
  --color-primary-deep: #7C3AED;   /* main brand — CTAs, active states, emphasis */
  --color-primary: #A855F7;        /* lighter brand — hover, focus ring */
  --color-primary-100: #F3EBFE;    /* tint — chip bg, subtle fills */
  --color-primary-200: #E5D6FB;    /* tint — borders on tinted surfaces */

  /* Brand gradient — primary button, banners, the reserve button */
  --gradient-brand: linear-gradient(135deg, #A855F7, #7C3AED);   /* @kind color */
  --gradient-brand-soft: linear-gradient(135deg, #C4A0FA, #9A5BF0); /* @kind color */

  /* ---- Accent: gold ---- */
  --color-accent: #F6A623;         /* rating stars, badges */
  --color-accent-100: #FEF2DD;     /* gold tint */

  /* ---- Neutrals / surfaces ---- */
  --color-bg: #F6F4FD;             /* page background */
  --color-surface: #FFFFFF;        /* cards / header */
  --color-surface-alt: #FBFAFE;    /* faint inset surfaces */
  --color-border: #ECE9F7;         /* lines & borders */
  --color-border-strong: #DCD6F0;  /* hairlines that need more presence */

  /* ---- Text ---- */
  --color-text: #221A38;           /* main text */
  --color-text-soft: #847E99;      /* muted / secondary text */
  --color-text-onbrand: #FFFFFF;   /* text on purple */

  /* ---- Semantic status ---- */
  --color-success: #2BB673;
  --color-success-bg: #E4F6EE;
  --color-danger: #F2547D;
  --color-danger-bg: #FDE8EE;
  --color-warning: #F6A623;
  --color-warning-bg: #FEF2DD;
  --color-info: #7C3AED;
  --color-info-bg: #F3EBFE;

  /* ---- Booking-status palette (badges) ---- */
  --status-pending: #F6A623;       --status-pending-bg: #FEF2DD;
  --status-confirmed: #7C3AED;     --status-confirmed-bg: #F3EBFE;
  --status-done: #2BB673;          --status-done-bg: #E4F6EE;
  --status-canceled: #F2547D;      --status-canceled-bg: #FDE8EE;
  --status-noshow: #847E99;        --status-noshow-bg: #EFEDF5;

  /* ---- Semantic aliases (use these in components) ---- */
  --text-body: var(--color-text);
  --text-muted: var(--color-text-soft);
  --surface-page: var(--color-bg);
  --surface-card: var(--color-surface);
  --border-card: var(--color-border);
  --focus-ring: var(--color-primary);
}