/* Design Tokens & CSS Variables */
:root {
  --font-family-display: Doran, "Century Gothic", "Tw Cen MT", "Futura", "Montserrat", sans-serif;
  --font-family-body: IRANSans, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Harmonic Type Scale & Leading (Better-Typography) */
  --text-xs: 0.75rem;       /* 12px - Badges, overlines, meta tags */
  --text-sm: 0.8125rem;     /* 13px - Secondary captions, indicators */
  --text-base: 0.875rem;    /* 14px - Interactive buttons, navigation */
  --text-body: 0.9375rem;   /* 15px - Body text baseline */
  --text-lead: 1.0625rem;   /* 17px - Subtitles, lead descriptions */
  --text-h4: 1.25rem;       /* 20px - Story items, compact titles */
  --text-h3: 1.5rem;        /* 24px - Sub-section titles */
  --text-h2: 2rem;          /* 32px - Section headings */
  --text-h1: clamp(2rem, 3.5vw, 2.75rem); /* Story & banner titles */
  --text-hero: clamp(2.25rem, 4.2vw, 4rem); /* Hero display title */

  --leading-tight: 1.2;     /* Headings, display text */
  --leading-snug: 1.35;     /* Buttons, compact cards */
  --leading-normal: 1.65;   /* Persian body paragraphs */
  --leading-relaxed: 1.8;   /* Long-form copy */

  --measure-narrow: 45ch;
  --measure-normal: 60ch;
  --measure-wide: 72ch;

  --radius-pill: 9999px;
  --radius-btn: var(--radius-pill);
  --radius-card-outer: 36px;
  --radius-card-inner: calc(var(--radius-card-outer) - 0.5rem); /* Concentric border radius: 36px - 24px = 12px */
  --radius-thumb: 14px;

  --transition-fast: 150ms ease-out;
  --transition-normal: 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow: 0.5s cubic-bezier(0.16, 1, 0.3, 1);

  /* Dark Theme Tokens (Default) */
  --shadow-border: 0 0 0 1px oklch(1 0 0 / 0.08);
  --shadow-border-hover: 0 0 0 1px oklch(1 0 0 / 0.13);
  --img-outline: 1px solid oklch(1 0 0 / 0.1);
  --img-outline-offset: -1px;

  --color-outer-bg: #827462;
  --color-card-bg: #161413;
  --color-card-surface: #1d1a18;
  --color-text-primary: #f5f1ec;
  --color-text-muted: #fff;
  --color-text-subtle: #35312e;
  --color-accent-bronze-light: #e4cbb7;
  --color-accent-bronze-dark: #837060;
  --color-pill-bg: rgba(46, 41, 38, 0.72);
  --color-pill-border: rgba(255, 255, 255, 0.08);
  --color-pill-active: rgba(68, 60, 56, 0.95);
  --color-card-border: rgba(255, 255, 255, 0.06);
  --color-card-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.65), 0 0 0 1px var(--color-card-border);
  --color-hero-bg: radial-gradient(circle at 35% 20%, #25201d 0%, #161413 65%);
  --color-scrim: linear-gradient(180deg, rgba(14, 11, 10, 0.3) 0%, rgba(14, 11, 10, 0.04) 28%, rgba(14, 11, 10, 0.22) 50%, rgba(14, 11, 10, 0.72) 75%, rgba(14, 11, 10, 0.94) 100%);
  --color-gallery-pattern: rgba(255, 255, 255, 0.025);
  --color-marquee: rgba(255, 255, 255, 0.08);
  --color-cta-bg: radial-gradient(circle at center, #2e2622 0%, #151312 85%);
  --color-partner-bg: rgba(255, 255, 255, 0.02);
  --color-partner-border: rgba(255, 255, 255, 0.1);
  --color-partner-hover-bg: rgba(255, 255, 255, 0.05);
  --color-partner-hover-border: rgba(255, 255, 255, 0.25);
  --color-toggle-bg: rgba(46, 41, 38, 0.85);
  --color-toggle-border: rgba(255, 255, 255, 0.18);
  --color-toggle-text: #f5f1ec;
}

[data-theme="light"] {
  --shadow-border:
    0px 0px 0px 1px oklch(0 0 0 / 0.06),
    0px 1px 2px -1px oklch(0 0 0 / 0.06),
    0px 2px 4px 0px oklch(0 0 0 / 0.04);
  --shadow-border-hover:
    0px 0px 0px 1px oklch(0 0 0 / 0.08),
    0px 1px 2px -1px oklch(0 0 0 / 0.08),
    0px 2px 4px 0px oklch(0 0 0 / 0.06);
  --img-outline: 1px solid oklch(0 0 0 / 0.1);
  --img-outline-offset: -1px;

  --color-outer-bg: #EAE5DE;
  --color-card-bg: #FFFFFF;
  --color-card-surface: #F9F7F4;
  --color-text-primary: #241F1C;
  --color-text-muted: #000;
  --color-text-subtle: #948981;
  --color-accent-bronze-light: #A48248;
  --color-accent-bronze-dark: #86652E;
  --color-pill-bg: rgba(244, 240, 233, 0.92);
  --color-pill-border: rgba(164, 130, 72, 0.22);
  --color-pill-active: rgba(230, 223, 212, 0.95);
  --color-card-border: rgba(164, 130, 72, 0.18);
  --color-card-shadow: 0 20px 50px -12px rgba(110, 90, 70, 0.16), 0 2px 8px rgba(0, 0, 0, 0.04), 0 0 0 1px var(--color-card-border);
  --color-hero-bg: radial-gradient(circle at 35% 20%, #FFFDF9 0%, #FAF5EE 70%);
  --color-scrim: linear-gradient(180deg, rgba(14, 11, 10, 0.3) 0%, rgba(14, 11, 10, 0.04) 28%, rgba(14, 11, 10, 0.22) 50%, rgba(14, 11, 10, 0.72) 75%, rgba(14, 11, 10, 0.94) 100%);
  --color-gallery-pattern: rgba(164, 130, 72, 0.04);
  --color-marquee: rgba(164, 130, 72, 0.1);
  --color-cta-bg: radial-gradient(circle at center, #9A7B44 0%, #765B2D 85%);
  --color-partner-bg: #FFFFFF;
  --color-partner-border: rgba(164, 130, 72, 0.15);
  --color-partner-hover-bg: #FDFBF8;
  --color-partner-hover-border: rgba(164, 130, 72, 0.35);
  --color-toggle-bg: rgba(244, 240, 233, 0.92);
  --color-toggle-border: rgba(164, 130, 72, 0.28);
  --color-toggle-text: #241F1C;
}

/* Base Styles & Reset */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  background-color: var(--color-outer-bg);
  color: var(--color-text-primary);
  font-family: var(--font-family-body);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 1.5rem;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color var(--transition-normal), color var(--transition-normal);
}

/* Modern Typography Wrapping & Touch Optimizations */
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

a, button, [role="button"] {
  touch-action: manipulation;
}

/* Screen Reader Only Utility */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Skip to Content Link */
.skip-link {
  position: absolute;
  top: -9999px;
  inset-inline-start: 1.5rem;
  z-index: 10000;
  padding: 0.85rem 1.75rem;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-card-bg);
  color: var(--color-text-primary);
  border: 2px solid var(--color-accent-bronze-light);
  border-radius: var(--radius-btn);
  font-weight: 700;
  font-size: var(--text-base);
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  transition: top 150ms ease-out;
}

.skip-link:focus-visible {
  top: 1.5rem;
  outline: 2px solid var(--color-accent-bronze-light);
  outline-offset: 3px;
}

/* Accessible Focus Outlines */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
[tabindex="0"]:focus-visible {
  outline: 2px solid var(--color-accent-bronze-light);
  outline-offset: 3px;
}

@media (forced-colors: active) {
  a:focus-visible,
  button:focus-visible,
  [role="button"]:focus-visible,
  [tabindex="0"]:focus-visible {
    outline: 2px solid Highlight;
    outline-offset: 3px;
  }
}

/* Prefers Reduced Motion Baseline */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media (max-width: 768px) {
  html,
  body {
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
  }
}