/* ==========================================================================
   RNO Beauty, design tokens
   Every colour, font, size, space, radius, shadow and motion value used on
   the site lives here. Components never hard-code these values.
   ========================================================================== */

:root {
  /* Colour: brand */
  --color-primary: #7B6A58;        /* taupe bronze, sampled from the logo */
  --color-primary-dark: #5E5042;
  --color-primary-ink: #6A5A4A;    /* taupe darkened for small text (AA 5.9:1) */
  --color-secondary: #0B3A6E;      /* deep navy, used sparingly */
  --color-secondary-dark: #082B52;
  --color-logo-navy: #003366;

  /* Colour: neutrals */
  --color-bg: #F5F4F1;
  --color-surface: #FFFFFF;
  --color-surface-warm: #FAF8F5;
  --color-accent: #C9B8A3;
  --color-blush: #EAD9CF;
  --color-blush-soft: #F3EAE4;
  --color-peach: #F2C3AA;
  --color-text: #2B2622;
  --color-text-muted: #6B635C;     /* darkened from #7A726B to pass AA */
  --color-border: #E4DED6;
  --color-border-strong: #CFC6BB;
  --color-overlay: rgba(43, 38, 34, 0.45);

  /* Colour: states */
  --color-success: #5F7A5B;
  --color-success-bg: #EEF2EC;
  --color-error: #A2493E;
  --color-error-bg: #F7ECEA;
  --color-warning: #A27A3B;
  --color-warning-bg: #F7F0E3;
  --color-info: var(--color-secondary);
  --color-info-bg: #E9EEF4;

  /* Colour: product shades */
  --shade-golden-veil: #D9A585;
  --shade-moonlight-glow: #E8BFAE;
  --shade-rose-beam: #C98A7E;

  /* Typography: families (self-hosted in fonts.css) */
  --font-display-en: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body-en: "Jost", "Helvetica Neue", Arial, sans-serif;
  --font-display-ar: "Amiri", "Cormorant Garamond", "Times New Roman", serif;
  --font-body-ar: "IBM Plex Sans Arabic", "Jost", Tahoma, Arial, sans-serif;
  --font-display: var(--font-display-en);
  --font-body: var(--font-body-en);

  /* Typography: fluid scale (360px to 1440px) */
  --fs-display: clamp(2.75rem, 1.9rem + 3.8vw, 5.25rem);
  --fs-h1: clamp(2.25rem, 1.7rem + 2.4vw, 3.75rem);
  --fs-h2: clamp(1.875rem, 1.5rem + 1.6vw, 2.875rem);
  --fs-h3: clamp(1.5rem, 1.3rem + 0.8vw, 2rem);
  --fs-h4: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);
  --fs-lead: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-xs: 0.75rem;
  --fs-label: 0.6875rem;

  --lh-tight: 1.1;
  --lh-heading: 1.2;
  --lh-body: 1.65;

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;

  /* Letter-spacing: Latin only, reset to 0 for Arabic */
  --tracking-label: 0.22em;
  --tracking-wide: 0.12em;
  --tracking-heading: 0.005em;

  /* Spacing: 8px system */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;
  --space-9: 4rem;
  --space-10: 5rem;
  --space-11: 6rem;
  --space-12: 7.5rem;

  --section-pad: clamp(3rem, 2rem + 4.5vw, 7.5rem);
  --gutter: clamp(1rem, 0.6rem + 1.8vw, 2.5rem);
  --container: 1320px;
  --container-narrow: 860px;

  /* Shape */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-pill: 999px;
  --border-thin: 1px solid var(--color-border);

  /* Elevation */
  --shadow-xs: 0 1px 2px rgba(43, 38, 34, 0.05);
  --shadow-sm: 0 4px 14px rgba(43, 38, 34, 0.06);
  --shadow-md: 0 12px 32px rgba(43, 38, 34, 0.08);
  --shadow-lg: 0 24px 60px rgba(43, 38, 34, 0.12);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 180ms;
  --dur-base: 320ms;
  --dur-slow: 700ms;
  --dur-reveal: 1000ms;
  --reveal-distance: 24px;

  /* Layout */
  --header-h: 72px;
  --announce-h: 36px;
  --adminbar: 0px;
  --tap: 44px;
  --z-header: 50;
  --z-sticky: 40;
  --z-drawer: 80;
  --z-modal: 90;
  --z-toast: 100;
}

/* Language-specific tokens */
html[lang="ar"] {
  --font-display: var(--font-display-ar);
  --font-body: var(--font-body-ar);
  --tracking-label: 0;
  --tracking-wide: 0;
  --tracking-heading: 0;
  --lh-body: 1.85;
  --lh-heading: 1.45;
  --lh-tight: 1.35;
  --fs-body: 1.0625rem;
  --fs-small: 0.9375rem;
  --fs-xs: 0.8125rem;
  --fs-label: 0.8125rem;
}

@media (min-width: 1024px) { :root { --header-h: 84px; } }

/* WordPress admin bar offset for sticky/fixed elements */
body.admin-bar { --adminbar: 32px; }
@media (max-width: 782px) { body.admin-bar { --adminbar: 46px; } }
@media (max-width: 600px) { body.admin-bar { --adminbar: 0px; } }

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; --dur-reveal: 0ms; --reveal-distance: 0px; }
}