/* ============================================================
   Royal Marble Hotel & Casino — royalmarbleresort.com
   Direction: Neo-Brutalist Trust Ledger (2026)
   Cream ground, black ink, warning orange + link blue.
   Archivo Black display + IBM Plex Mono body. Boxed, stamped,
   audit-ledger system. Minimal motion, strong focus outlines.
   ============================================================ */

/* ---------- Design tokens ---------- */
:root {
  color-scheme: light;

  /* Surfaces — cream / concrete */
  --bg:           #FFFDF2;  /* cream ground */
  --bg-soft:      #F7F4E8;
  --surface:      #F2F2F2;  /* concrete surface */
  --surface-2:    #ECECEC;
  --surface-sunk: #E4E0D2;
  --surface-raise:#FFFFFF;
  --ink-surface:  #1A1A1A;  /* near-black panel fill */

  /* Ink / text — black on cream (AA-checked) */
  --ink:          #000000;
  --text:         #0A0A0A;
  --text-muted:   #3A3A3A;
  --text-faint:   #5C5C5C;
  --on-ink:       #FFFDF2;  /* text on black panels */
  --on-ink-muted: #C9C5B6;

  /* Lines — brutalist black borders */
  --border:        #000000;
  --border-soft:   rgba(0,0,0,0.18);
  --rule:          rgba(0,0,0,0.85);
  --rule-soft:     rgba(0,0,0,0.12);

  /* Brand accent — warning orange (fills / large display) */
  --accent:        #FF4D00;
  --accent-soft:   #FF7A40;
  --accent-tint:   rgba(255,77,0,0.10);
  --accent-ink:    #C73A00;  /* AA orange text on cream */

  /* Secondary — link blue (AA on cream) */
  --link:          #0057FF;
  --link-visited:  #4A2EA8;
  --link-tint:     rgba(0,87,255,0.08);

  /* Status (AA on cream) */
  --good:    #1B7A3D;
  --good-tint: rgba(27,122,61,0.10);
  --warn:    #B8430B;
  --warn-tint: rgba(184,67,11,0.10);

  /* Type */
  --font-display: "Archivo Black", "Arial Black", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", "Courier New", ui-monospace, monospace;
  --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-body: var(--font-mono);

  /* Fluid type scale — loud tabloid headlines */
  --fs-display: clamp(3rem, 8vw, 7.5rem);
  --fs-h1: clamp(2.4rem, 5vw, 4.5rem);
  --fs-h2: clamp(1.8rem, 3vw, 2.8rem);
  --fs-h3: clamp(1.2rem, 1.2vw, 1.5rem);
  --fs-lead: clamp(1.05rem, 0.6vw, 1.25rem);
  --fs-body: 1rem;
  --fs-sm: 0.875rem;
  --fs-cap: 0.75rem;
  --fs-label: 0.6875rem;

  --lh-tight: 0.98;
  --lh-snug: 1.12;
  --lh-body: 1.55;

  --track-tight: -0.03em;
  --track-cap: 0.18em;
  --track-label: 0.12em;

  /* Spacing (8px base) */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;

  /* Layout */
  --maxw: min(1280px, 92vw);
  --maxw-wide: min(1600px, 96vw);
  --gap: 24px;
  --gap-tight: 16px;

  /* Radii — brutalist: square, no softening */
  --r-sm: 0px;
  --r-md: 0px;
  --r-lg: 0px;
  --r-pill: 0px;

  /* Shadows — hard offset block shadows (neo-brutalist) */
  --shadow-1: 4px 4px 0 0 #000000;
  --shadow-2: 6px 6px 0 0 #000000;
  --shadow-3: 8px 8px 0 0 #000000;
  --shadow-ink: 4px 4px 0 0 var(--accent);
  --shadow-inset: inset 0 0 0 2px #000000;

  /* Motion — minimal, snap */
  --ease: steps(4, end);
  --dur: 120ms;

  /* Focus — strong outline */
  --focus: 3px solid var(--link);
  --focus-offset: 2px;
  --focus-ring: 0 0 0 3px var(--bg), 0 0 0 6px var(--link);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0ms; }
}