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

:root {
  /* —— Soft slate teal (logo) —— */
  --rh-gold-50: #eef3f2;
  --rh-gold-100: #d5e0dd;
  --rh-gold-200: #a8c0bb;
  --rh-gold-300: #7a9e97;
  --rh-gold-400: #5c837b;
  --rh-gold-500: #4a6b65;
  --rh-gold-600: #38524e;
  --rh-gold-700: #283b38;
  --rh-gold-800: #1a2725;

  /* —— Cool graphite —— */
  --rh-ink-0: #0e1114;
  --rh-ink-50: #151a1f;
  --rh-ink-100: #1c232a;
  --rh-ink-200: #2a333c;
  --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: #f5f4f1;
  --rh-surface-muted: #eeecea;
  --rh-warn: #c47a1a;
  --rh-warn-bg: color-mix(in srgb, #c47a1a 12%, transparent);

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

/* =========================================================================
   Foundation scales — additive layer for the rh-ui component system.
   Nothing here overrides a legacy value; these are new names only.
   ========================================================================= */

:root {
  /* —— Spacing (4px base) —— */
  --rh-space-1: 0.25rem;
  --rh-space-2: 0.5rem;
  --rh-space-3: 0.75rem;
  --rh-space-4: 1rem;
  --rh-space-5: 1.25rem;
  --rh-space-6: 1.5rem;
  --rh-space-7: 2rem;
  --rh-space-8: 2.5rem;
  --rh-space-9: 3rem;
  --rh-space-10: 4rem;
  --rh-space-11: 5rem;
  --rh-space-12: 6rem;

  /* —— Type scale —— */
  --rh-text-2xs: 0.6875rem;
  --rh-text-xs: 0.75rem;
  --rh-text-sm: 0.8125rem;
  --rh-text-base: 0.9375rem;
  --rh-text-lg: 1.125rem;
  --rh-text-xl: 1.375rem;
  --rh-text-2xl: 1.75rem;
  --rh-text-3xl: 2.25rem;

  --rh-leading-tight: 1.25;
  --rh-leading-normal: 1.5;
  --rh-leading-relaxed: 1.7;

  --rh-weight-light: 300;
  --rh-weight-regular: 400;
  --rh-weight-medium: 500;
  --rh-weight-semibold: 600;

  /* Wide tracking carries the quiet-luxury caps labels used across the app */
  --rh-tracking-tight: -0.01em;
  --rh-tracking-normal: 0;
  --rh-tracking-wide: 0.08em;
  --rh-tracking-wider: 0.16em;

  /* —— Elevation (warm ink, never pure black) —— */
  --rh-shadow-xs: 0 1px 2px color-mix(in srgb, var(--rh-ink-0) 6%, transparent);
  --rh-shadow-sm: 0 2px 6px color-mix(in srgb, var(--rh-ink-0) 8%, transparent);
  --rh-shadow-md: 0 8px 20px color-mix(in srgb, var(--rh-ink-0) 10%, transparent);
  --rh-shadow-lg: 0 18px 40px color-mix(in srgb, var(--rh-ink-0) 14%, transparent);
  --rh-shadow-xl: 0 28px 70px color-mix(in srgb, var(--rh-ink-0) 22%, transparent);
  --rh-shadow-focus: 0 0 0 3px color-mix(in srgb, var(--rh-gold-400) 30%, transparent);

  /* —— Stacking order —— */
  --rh-z-base: 1;
  --rh-z-raised: 10;
  --rh-z-dropdown: 30;
  --rh-z-sticky: 40;
  --rh-z-overlay: 60;
  --rh-z-modal: 80;
  --rh-z-popover: 100;
  --rh-z-toast: 120;

  /* —— Semantic status (completes danger/warn) —— */
  --rh-success: #4a9b6e;
  --rh-success-bg: color-mix(in srgb, #4a9b6e 12%, transparent);
  --rh-success-fg: #2f6b4c;
  --rh-info: #5b7fa8;
  --rh-info-bg: color-mix(in srgb, #5b7fa8 12%, transparent);
  --rh-info-fg: #3d5c80;
  --rh-danger-fg: #a34a4a;
  --rh-warn-fg: #8f5810;

  /* —— Light content surfaces —— */
  --rh-surface-app: var(--rh-surface-muted);
  --rh-surface-raised: var(--rh-surface);
  --rh-surface-sunken: color-mix(in srgb, var(--rh-ink-500) 7%, var(--rh-surface));
  --rh-on-surface: var(--rh-ink-200);
  --rh-on-surface-soft: var(--rh-ink-400);
  --rh-on-surface-muted: var(--rh-ink-500);

  /* —— Dark chrome islands (sidebar, POS, KDS, ops detail pane) —— */
  --rh-chrome-bg: var(--rh-ink-100);
  --rh-chrome-bg-soft: var(--rh-ink-200);
  --rh-chrome-bg-deep: var(--rh-ink-50);
  --rh-chrome-gradient: linear-gradient(180deg, var(--rh-ink-100) 0%, var(--rh-ink-50) 100%);
  --rh-chrome-text: var(--rh-ink-800);
  --rh-chrome-text-soft: var(--rh-ink-600);
  --rh-chrome-text-muted: var(--rh-ink-500);
  --rh-chrome-line: color-mix(in srgb, var(--rh-gold-500) 18%, transparent);
  --rh-chrome-line-strong: color-mix(in srgb, var(--rh-gold-500) 32%, transparent);

  /* —— Control sizing (--rh-tap-min meets the 44px touch target floor) —— */
  --rh-control-h-sm: 2rem;
  --rh-control-h: 2.5rem;
  --rh-control-h-lg: 3rem;
  --rh-tap-min: 2.75rem;
  --rh-border: 1px;
  --rh-border-strong: 1.5px;

  /* —— Breakpoints ——
     Custom properties cannot be read inside @media, so these are the
     documented contract; rh-ui.css uses these exact values literally:
       sm 560px · md 900px · lg 1200px · shell 980px (sidebar collapse only)
     Exposed as values so scripts can read them via getComputedStyle. */
  --rh-bp-sm: 560px;
  --rh-bp-md: 900px;
  --rh-bp-lg: 1200px;
  --rh-bp-shell: 980px;
}

*,
*::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);
}