/* ============================================================
   SOLARI — Design Tokens
   Calm & therapeutic palette inspired by the existing
   solaricentre.com look (soft periwinkle header, navy/indigo
   wordmark, magenta logo flourish, elegant script headings).
   ============================================================ */

:root {
  /* ---------- Color: Brand ---------- */
  --color-brand-blue-50:  #F2F5FB;   /* page tint / soft cards */
  --color-brand-blue-100: #E4ECF7;   /* very light wash */
  --color-brand-blue-200: #C9D7EC;   /* header band, secondary fills */
  --color-brand-blue-300: #B8C8E0;   /* primary header band (matches screenshots) */
  --color-brand-blue-400: #8FA5C9;   /* hover, focus rings */
  --color-brand-blue-500: #5C6F94;   /* navy/indigo wordmark + headings */
  --color-brand-blue-700: #3F4E6E;   /* deep ink */

  --color-brand-accent:        #B8447D; /* magenta — passes AA on white text (5.05) */
  --color-brand-accent-soft:   #F4D7E5; /* tint background for badges */
  --color-brand-accent-strong: #A33B71; /* hover state for accent CTAs */
  --color-brand-accent-flourish: #C94F8B; /* lighter magenta — used only for the logo flourish, not for text-bearing UI */

  /* ---------- Color: Neutrals ---------- */
  /* Header band — its own tokens so a theme can darken the band without
     dragging every heading on a white page down with it. */
  --color-header-bg:        var(--color-brand-blue-300);
  --color-header-ink:       var(--color-brand-blue-700);
  --color-header-ink-soft:  var(--color-brand-blue-500);
  /* Accent as used ON the band. Split from the page accent because a colour
     that passes on white can fail badly on a dark header. */
  --color-header-accent:    var(--color-brand-accent);

  --color-bg:           #FFFFFF;
  --color-bg-muted:     #FAF9F6;     /* warm off-white for sections */
  --color-bg-cream:     #F5EFE6;     /* gentle warmth (used sparingly) */
  --color-surface:      #FFFFFF;
  --color-border:       #E5E7EE;
  --color-divider:      #EEF1F6;

  --color-text:         #2A3142;     /* primary body text */
  --color-text-muted:   #5E6878;
  --color-text-soft:    #6E7787;
  --color-text-on-dark: #FFFFFF;

  /* ---------- Color: Status (booking) ---------- */
  --color-status-pending:   #8C600F;   /* amber, AA-compliant on bg */
  --color-status-pending-bg:#FDF4E1;
  --color-status-confirmed: #1E7A4D;
  --color-status-confirmed-bg:#E2F4EC;
  --color-status-cancelled: #B33A3A;
  --color-status-cancelled-bg:#F9E5E5;
  --color-status-completed: #445C82;
  --color-status-completed-bg:#E4ECF7;

  /* ---------- Typography ---------- */
  --font-script: 'Pinyon Script', 'Allura', 'Apple Chancery', cursive;
  --font-serif:  'Playfair Display', 'Cormorant Garamond', Georgia, serif;
  --font-sans:   'DM Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;   /* (R1) used by admin.css table-detail labels */
  --fs-14: 0.875rem;
  --fs-15: 0.9375rem;   /* (R1) used by hero subtitle on mobile */
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-32: 2rem;
  --fs-40: 2.5rem;
  --fs-56: 3.5rem;
  --fs-72: 4.5rem;

  --lh-tight:  1.15;
  --lh-snug:   1.35;
  --lh-normal: 1.55;
  --lh-loose:  1.75;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;

  --tracking-wide:    0.08em;
  --tracking-wider:   0.14em;
  --tracking-tight:  -0.01em;

  /* ---------- Layout & spacing ---------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  --container-max: 1200px;
  --container-narrow: 880px;

  /* ---------- Radius / borders ---------- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* ---------- Shadows ---------- */
  --shadow-xs: 0 1px 2px rgba(43, 49, 66, 0.06);
  --shadow-sm: 0 2px 6px rgba(43, 49, 66, 0.06), 0 1px 2px rgba(43, 49, 66, 0.04);
  --shadow-md: 0 8px 24px rgba(43, 49, 66, 0.08), 0 2px 6px rgba(43, 49, 66, 0.05);
  --shadow-lg: 0 18px 48px rgba(43, 49, 66, 0.12), 0 4px 12px rgba(43, 49, 66, 0.06);
  --shadow-focus: 0 0 0 3px rgba(143, 165, 201, 0.5);

  /* ---------- Motion ---------- */
  --ease-out:   cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-soft:  cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:   140ms;
  --dur-base:   220ms;
  --dur-slow:   360ms;

  /* ---------- Z-index scale ---------- */
  --z-base:    1;
  --z-sticky:  100;
  --z-overlay: 500;
  --z-modal:   1000;
  --z-toast:   1500;
}