/* Diriyah brand tokens for the twin and the visitor guide.
   Taken from the official website www.diriyah.sa on 24 Oct 2026 (computed styles and CSS of the home page, Plan Your
   Visit and the places map; record in ../../brand/README.md). Fonts are the site's own files (brand/official/fonts).
   Light theme = the website's cream pages; dark theme = night-time twin panels in the same browns. */
@font-face { font-family: 'LinotypeBrewery'; src: url('fonts/LinotypeBrewery-Bold.ttf') format('truetype'); font-weight: 400 700; font-display: swap; }
@font-face { font-family: 'GraphikArabic'; src: url('fonts/GraphikArabic-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'GraphikArabic'; src: url('fonts/GraphikArabic-Medium.ttf') format('truetype'); font-weight: 500 700; font-display: swap; }
@font-face { font-family: 'Kermes'; src: url('fonts/Kermes-SemiBold.woff2') format('woff2'); font-weight: 600 700; font-display: swap; }
@font-face { font-family: 'SaudiRiyal'; src: url('fonts/SaudiRiyal-Regular.ttf') format('truetype'); font-weight: 400; unicode-range: U+20C1, U+E900; font-display: swap; }
@font-face { font-family: 'Silkscreen'; src: url('fonts/silkscreen/Silkscreen-Regular.ttf') format('truetype'); font-display: swap; }

:root {
  /* official palette (diriyah.sa) */
  --dr-brown: #623c2c;        /* brand text, headings, nav on light */
  --dr-brown-deep: #3d2419;   /* derived: darker brown for dark panels */
  --dr-earth: #61452f;
  --dr-sand: #c79667;         /* ornament (diamond, star), accents, buttons */
  --dr-sand-light: #d9a97f;
  --dr-clay: #c89884;
  --dr-blush: #e8c9af;
  --dr-linen: #f6e9df;        /* section and banner background */
  --dr-paper: #f4e5d2;
  --dr-cream: #fdfaf7;        /* page background, text on photos */
  --dr-burgundy: #55152e;
  --dr-mauve: #774458;
  --dr-rose: #ddd0d5;
  --dr-night: #1e1f39;        /* navy used on the site's night sections */
  --dr-teal: #093e3f;
  --dr-blue: #2f5da8;
  --dr-red: #c62a2a;
  --dr-green: #2f855a;
  --dr-flag-green: #006c35;   /* Saudi flag green */

  --font-display: 'LinotypeBrewery', 'Georgia', serif;
  --font-ui: 'GraphikArabic', 'Noto Sans Arabic', 'Segoe UI', system-ui, sans-serif;
  --font-accent: 'Kermes', 'LinotypeBrewery', serif;
  --font-num: 'GraphikArabic', system-ui, sans-serif;
  --font-riyal: 'SaudiRiyal', 'GraphikArabic', sans-serif;
  --font-tiny: 'Silkscreen', monospace;

  --radius: 4px;              /* site buttons and links: 4 px */
  --btn-grad: linear-gradient(135deg, #c79667 0%, #a7754d 55%, #8a5a3a 100%);
  --shadow: 0 6px 18px rgba(61, 36, 25, 0.18);

  /* semantic tokens (light) */
  --bg: var(--dr-cream);
  --bg-2: var(--dr-linen);
  --panel: rgba(253, 250, 247, 0.94);
  --ink: var(--dr-brown);
  --ink-2: #7a5b4c;           /* was #8a6a5a (4.1:1 on linen); 5.2:1 on linen, 5.9:1 on cream (WCAG AA) */
  --line: rgba(98, 60, 44, 0.16);
  --accent: var(--dr-sand);
  --accent-ink: #ffffff;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1c120d; --bg-2: #2a1a13; --panel: rgba(36, 22, 16, 0.92); --ink: var(--dr-cream); --ink-2: #cdb4a2;
    --line: rgba(199, 150, 103, 0.22); --accent: var(--dr-sand); --accent-ink: #1c120d; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #1c120d; --bg-2: #2a1a13; --panel: rgba(36, 22, 16, 0.92); --ink: var(--dr-cream); --ink-2: #cdb4a2;
  --line: rgba(199, 150, 103, 0.22); --accent: var(--dr-sand); --accent-ink: #1c120d; color-scheme: dark;
}

/* the site's ornament: diamond, six-point star, diamond in sand */
.dr-ornament { display: inline-flex; gap: 14px; align-items: center; color: var(--dr-sand); }
.dr-ornament i { width: 9px; height: 15px; background: currentColor; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.dr-ornament b { width: 15px; height: 15px; background: currentColor;
  clip-path: polygon(45% 0, 55% 0, 55% 38%, 88% 18%, 93% 27%, 60% 47%, 60% 53%, 93% 73%, 88% 82%, 55% 62%, 55% 100%, 45% 100%, 45% 62%, 12% 82%, 7% 73%, 40% 53%, 40% 47%, 7% 27%, 12% 18%, 45% 38%); }
.dr-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border: 0; border-radius: var(--radius);
  background: var(--btn-grad); color: #fff; font: 500 15px/1.2 var(--font-ui); box-shadow: var(--shadow); cursor: pointer; text-decoration: none; }
.dr-btn.ghost { background: transparent; color: var(--ink); box-shadow: none; text-decoration: underline; text-underline-offset: 4px; }
.dr-h { font-family: var(--font-display); font-weight: 700; color: var(--ink); letter-spacing: 0; line-height: 1.05; }
.riyal { font-family: var(--font-riyal); }
.placeholder-size { font: 8px/1 var(--font-tiny); letter-spacing: 0.5px; -webkit-font-smoothing: none; }
[dir="rtl"] .dr-h { font-family: var(--font-ui); font-weight: 500; }