/**
 * Royal House — Brand Design System
 * Contemporary quiet-luxury identity derived from antique-gold crest.
 */

:root {
  /* —— Metallic gold (logo) —— */
  --rh-gold-50: #f6f1e0;
  --rh-gold-100: #ebe1bc;
  --rh-gold-200: #d6c582;
  --rh-gold-300: #c4ae5a;
  --rh-gold-400: #b49a45;
  --rh-gold-500: #a08938;
  --rh-gold-600: #826c2c;
  --rh-gold-700: #645322;
  --rh-gold-800: #463a18;

  /* —— Warm ink (espresso / architectural charcoal) —— */
  --rh-ink-0: #050403;
  --rh-ink-50: #0b0907;
  --rh-ink-100: #12100d;
  --rh-ink-200: #1c1914;
  --rh-ink-300: #2a2520;
  --rh-ink-400: #4a4339;
  --rh-ink-500: #7a7164;
  --rh-ink-600: #a39a8c;
  --rh-ink-700: #c9c0b2;
  --rh-ink-800: #e6dfd3;
  --rh-ink-900: #f3eee5;

  /* —— Semantic —— */
  --rh-brand: var(--rh-gold-400);
  --rh-brand-bright: var(--rh-gold-300);
  --rh-brand-deep: var(--rh-gold-600);
  --rh-bg: var(--rh-ink-50);
  --rh-bg-elevated: var(--rh-ink-100);
  --rh-text: var(--rh-ink-900);
  --rh-text-soft: var(--rh-ink-700);
  --rh-text-muted: var(--rh-ink-500);
  --rh-line: color-mix(in srgb, var(--rh-gold-500) 28%, transparent);
  --rh-danger: #d47272;
  --rh-danger-bg: color-mix(in srgb, #d47272 12%, transparent);

  /* —— Type —— */
  --rh-font-display: "Cormorant Garamond", "Times New Roman", serif;
  --rh-font-arabic: "IBM Plex Sans Arabic", "Segoe UI", sans-serif;
  --rh-font-ui: "Sora", "IBM Plex Sans Arabic", system-ui, sans-serif;

  /* —— Motion —— */
  --rh-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --rh-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --rh-dur: 520ms;
  --rh-dur-slow: 1100ms;

  /* —— Radii (كل الحواف منحنية) —— */
  --rh-radius-xs: 8px;
  --rh-radius-sm: 12px;
  --rh-radius: 16px;
  --rh-radius-md: 16px;
  --rh-radius-lg: 22px;
  --rh-radius-xl: 28px;
  --rh-radius-pill: 999px;

  --rh-surface: #fffcf7;
  --rh-surface-muted: #f3efe6;
  --rh-warn: #c47a1a;
  --rh-warn-bg: color-mix(in srgb, #c47a1a 12%, transparent);

  --rh-hairline: 1px solid var(--rh-line);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--rh-font-ui);
  color: var(--rh-text);
  background: var(--rh-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: var(--rh-brand-bright);
  text-decoration: none;
}

:focus-visible {
  outline: 1.5px solid var(--rh-gold-300);
  outline-offset: 3px;
}

::selection {
  background: color-mix(in srgb, var(--rh-gold-500) 40%, transparent);
  color: var(--rh-ink-900);
}