/* Design tokens — carried over from the approved mockup B «Palace Gallery»
 * (mockups/7sultanscasino.co/b-palace-gallery.html, :root). Palette and fonts
 * are fixed by the brief §2. Every number in the other sheets comes from here.
 */
:root {
  /* brief §2.1 */
  --color-bg: #111318;
  --color-bg-2: #20232B;
  --color-gold: #D5A547;
  --color-wine: #8A2638;
  --color-text: #FFFFFF;
  --color-text-2: #BBC1CA;
  --color-button: #E0B45B;
  --color-line: #373B45;
  --color-on-button: #16130C;
  --color-brand: var(--color-gold);           /* kit components read --color-brand */
  --color-danger: #F08A8A;
  --color-ok: #8BD3A8;

  /* surfaces, tinted neutrals */
  --surface-0: #111318;
  --surface-1: #171A20;
  --surface-2: #1E2129;
  --surface-3: #2A2E38;

  --hair: color-mix(in srgb, var(--color-text) 9%, transparent);
  --hair-2: color-mix(in srgb, var(--color-text) 14%, transparent);
  --hair-gold: color-mix(in srgb, var(--color-gold) 42%, transparent);
  --hair-gold-2: color-mix(in srgb, var(--color-gold) 22%, transparent);
  --gold-tint: color-mix(in srgb, var(--color-gold) 12%, transparent);
  --wine-tint: color-mix(in srgb, var(--color-wine) 34%, transparent);

  /* type — brief §2.2: Cinzel headings, Inter body, Inter SemiBold buttons */
  --font-head: 'Cinzel', 'Times New Roman', serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fs-mast: clamp(30px, 4.2vw, 60px);
  --fs-h1: clamp(34px, 4.6vw, 64px);
  --fs-h1-frame: clamp(30px, 3.6vw, 50px);
  --fs-h2: clamp(28px, 3.2vw, 44px);
  --fs-h3: 18px;
  --fs-body: 16px;
  --fs-lede: 17px;
  --fs-small: 14px;
  --fs-xs: 13px;
  --fs-micro: 11px;
  --lh-base: 1.6;

  /* shape & depth */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;
  --shadow-1: 0 1px 0 rgba(255,255,255,.04) inset, 0 1px 2px rgba(5,6,9,.35);
  --shadow-2: 0 1px 0 rgba(255,255,255,.05) inset, 0 8px 24px -8px rgba(5,6,9,.6), 0 2px 6px rgba(5,6,9,.35);
  --shadow-3: 0 30px 60px -20px rgba(5,6,9,.75), 0 12px 24px -12px rgba(5,6,9,.6);

  /* motion */
  --ease: cubic-bezier(.22,1,.36,1);
  --ease-out: cubic-bezier(.22,1,.36,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --ease-lux: cubic-bezier(.65,0,.35,1);
  --dur-fast: 200ms;
  --dur-base: 350ms;
  --dur-slow: 1000ms;

  /* layout */
  --container: 1280px;
  --gutter: clamp(16px, 3vw, 40px);
  --sec: clamp(80px, 9vw, 132px);
  --edge: 0px;
  --z-header: 60;
  --z-drawer: 90;
  --z-modal: 100;
  --z-banner: 95;
  --space-8: 8px;
  --space-16: 16px;

  /* signature shapes: the ogee (Moorish) arch and the girih-style lattice */
  --ogee: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 140' preserveAspectRatio='none'%3E%3Cpath d='M0 140V48C0 26 24 12 40 5.5C45 3.5 48.5 2 50 0C51.5 2 55 3.5 60 5.5C76 12 100 26 100 48V140Z'/%3E%3C/svg%3E");
  --ogee-head: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 30' preserveAspectRatio='none'%3E%3Cpath d='M0 30.5C0 21 24 17 38 10C45 6.5 48.5 3.5 50 0C51.5 3.5 55 6.5 62 10C76 17 100 21 100 30.5Z'/%3E%3C/svg%3E");
  --lattice: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='72' viewBox='0 0 48 72'%3E%3Cg fill='none' stroke='%23D5A547' stroke-width='.7'%3E%3Cpath d='M0 0C0 18 24 18 24 36S48 54 48 72M48 0C48 18 24 18 24 36S0 54 0 72'/%3E%3Cpath d='M24 30l3 6-3 6-3-6zM0 66l3 6M48 66l-3 6M0 6l3-6M48 6l-3-6'/%3E%3C/g%3E%3C/svg%3E");
}