/* UNISNOV design tokens (spec §3, §145). Permanent identity: deep black +
   warm metallic gold. No theme switcher. Gold is used intentionally:
   brand Ring, selected nav, primary actions, the Host ring, loading identity. */
:root {
  /* color */
  --black: #050505;
  --bg: #050505;
  --surface-1: #0c0c0d;
  --surface-2: #131314;
  --surface-3: #1b1b1d;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.14);
  --text: #f5f3ef;
  --text-2: #a9a6a0;
  --text-3: #74716c;
  --gold: #e7b96b;
  --gold-hi: #f6dca6;
  --gold-lo: #b9883d;
  --gold-metal: linear-gradient(135deg, #f6dca6 0%, #e7b96b 38%, #c9953f 72%, #f0cf8c 100%);
  --gold-soft: rgba(231, 185, 107, 0.14);
  --gold-glow: 0 0 22px 2px rgba(231, 185, 107, 0.28);
  --gold-glow-strong: 0 0 36px 6px rgba(231, 185, 107, 0.45);
  --ring-member: rgba(255, 255, 255, 0.88);
  --danger: #e5484d;
  --danger-soft: rgba(229, 72, 77, 0.14);
  --ok: #4cc38a;
  --busy: #e7b96b;
  --overlay: rgba(0, 0, 0, 0.72);

  /* type */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans Arabic", sans-serif;
  --font-display: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans Arabic", sans-serif;
  --fs-xs: 11.5px; --fs-sm: 13px; --fs-md: 15px; --fs-lg: 17px; --fs-xl: 21px; --fs-2xl: 28px;

  /* spacing */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px; --s12: 48px;
  --gutter: 16px;

  /* radius */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-pill: 999px;

  /* sizes */
  --touch: 44px;
  --rail-w: 232px;
  --bottom-nav-h: 64px;
  --side-w: 360px;
  --poster-w: 132px;

  /* motion */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --t-fast: 140ms; --t-med: 240ms; --t-slow: 420ms;

  /* z-index */
  --z-room: 50; --z-indicator: 60; --z-nav: 70; --z-overlay: 100; --z-system: 200; --z-toast: 300;

  /* safe areas */
  --sat: env(safe-area-inset-top, 0px);
  --sab: min(env(safe-area-inset-bottom, 0px), 14px);            /* hug the bottom edge: iOS reports a tall inset in some modes */
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
}
@media (min-width: 768px) { :root { --gutter: 24px; --poster-w: 148px; --rail-w: 88px; } }
@media (min-width: 1024px) { :root { --gutter: 32px; --poster-w: 160px; --rail-w: 232px; } }
@media (min-width: 1440px) { :root { --gutter: 40px; --poster-w: 176px; --side-w: 400px; } }