/**
 * Template #1 Design Tokens — Premium Riyadh Salon & Spa
 *
 * Central source of truth for the approved Template #1 palette and typography
 * foundation. Semantic names describe ROLE, not raw color, so this file can be
 * re-themed for future clients without renaming variables used elsewhere.
 *
 * Do not hardcode these values in template-parts or inline styles — reference
 * the custom properties instead.
 */

:root {
  /* Core */
  --color-primary: #342A25;      /* Espresso — primary brand/dark tone */
  --color-text: #1C1917;         /* Dark Charcoal — body/heading text */

  /* Accents */
  --color-accent: #80613F;       /* Functional Bronze — primary accent, CTAs */
  --color-accent-soft: #B3916B;  /* Soft Champagne — secondary/soft accent */

  /* Backgrounds / Surfaces */
  --color-background: #F7F3ED;   /* Ivory — page background */
  --color-background-alt: #E8DED2; /* Sand — alternate section background */
  --color-surface: #FCFBF8;      /* Surface White — cards, panels, elevated surfaces */

  /* Supporting */
  --color-stone: #B7AA9D;        /* Stone — decorative/secondary tone */
  --color-muted: #6F655E;        /* Muted Text — secondary/supporting copy */
  --color-border: #DCCFC2;       /* Border — hairlines, dividers, input borders */

  /* WhatsApp brand — deliberately outside the salon's own palette. Used only
     for WhatsApp CTA controls (header, mobile menu, footer, floating
     button) so WhatsApp actions read as their own recognizable, distinct
     brand action rather than a variant of the salon's Booking CTA. */
  --color-whatsapp: #25D366;
  --color-whatsapp-dark: #1DA851; /* Hover/focus shade of the above. */

  /* Typography — English editorial/display */
  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-weight-display-medium: 500;
  --font-weight-display-semibold: 600;

  /* Typography — Body / UI / Arabic foundation */
  --font-body: 'IBM Plex Sans Arabic', -apple-system, 'Segoe UI', Tahoma, Arial, sans-serif;
  --font-weight-body-regular: 400;
  --font-weight-body-medium: 500;
  --font-weight-body-semibold: 600;
}

/**
 * RTL-safe foundation note:
 * Future theme-level CSS in this child theme should prefer logical properties
 * (margin-inline, padding-inline, inset-inline, border-inline, text-align: start/end)
 * over directional left/right properties, so Arabic/RTL layouts do not require
 * a parallel override stylesheet. No directional styling is defined yet — this
 * file only establishes tokens.
 */