/* ------------ maash.art — base tokens & typography ------------- */

:root {
  /* Palette — warm parchment base, deep ink, blueprint cyan accent */
  --paper: #f5f1ea;
  --paper-2: #ebe5d9;
  --paper-3: #ddd5c5;
  --ink: #1a1a1a;
  --ink-soft: #2e2a26;
  --ink-mute: #6a6258;
  --line: rgba(26, 26, 26, 0.18);
  --line-soft: rgba(26, 26, 26, 0.09);
  --blueprint: #0b3954;
  --blueprint-2: #18587a;
  --blueprint-ink: #082638;
  --rust: #a84f2a;

  /* Type */
  --serif: 'Cormorant Garamond', 'Cormorant', 'Times New Roman', serif;
  --serif-ar: 'Cairo', 'Noto Serif Arabic', 'Cormorant Garamond', serif;
  --sans: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --sans-ar: 'Cairo', 'IBM Plex Sans Arabic', 'Archivo', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --mono-ar: 'Cairo', 'JetBrains Mono', ui-monospace, monospace;

  /* Scale */
  --edge: clamp(22px, 4vw, 72px);
  --rule: 1px;

  /* Motion */
  --ease: cubic-bezier(0.2, 0.65, 0.2, 1);
  --slow: 1200ms;
  --mid: 700ms;
  --fast: 320ms;

  --scroll-speed: 1; /* tweakable */
}

/* Dark variant */
[data-theme='dark'] {
  --paper: #141210;
  --paper-2: #1c1a17;
  --paper-3: #26231f;
  --ink: #ece6d8;
  --ink-soft: #d3ccbb;
  --ink-mute: #8a8370;
  --line: rgba(236, 230, 216, 0.18);
  --line-soft: rgba(236, 230, 216, 0.09);
  --blueprint: #6fb4d1;
  --blueprint-2: #a8d3e6;
  --blueprint-ink: #cfe7f3;
  --rust: #d77a53;
}

/* Alt palettes toggled via data-palette */
[data-palette='walnut'] {
  --paper: #faf8f3;
  --paper-2: #efe9db;
  --paper-3: #ddd0b4;
  --ink: #2d2a24;
  --ink-soft: #3a362e;
  --blueprint: #b8865a;
  --blueprint-2: #8f6437;
  --blueprint-ink: #4a3317;
  --rust: #a84f2a;
}
[data-palette='rust'] {
  --paper: #ebe7df;
  --paper-2: #ddd7ca;
  --paper-3: #c9c0ae;
  --ink: #141414;
  --ink-soft: #2a2623;
  --blueprint: #c43c1a;
  --blueprint-2: #7a2310;
  --blueprint-ink: #4a1507;
  --rust: #c43c1a;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

main { overflow-x: clip; }

body {
  transition: background-color 600ms var(--ease), color 600ms var(--ease);
}

img, svg { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

::selection { background: var(--ink); color: var(--paper); }

/* Paper grain — very subtle */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 200;
  opacity: 0.35;
  mix-blend-mode: multiply;
  background-image:
    radial-gradient(rgba(0, 0, 0, 0.04) 1px, transparent 1px),
    radial-gradient(rgba(0, 0, 0, 0.03) 1px, transparent 1px);
  background-size: 3px 3px, 7px 7px;
  background-position: 0 0, 1px 2px;
}
[data-theme='dark'] body::before { opacity: 0.2; mix-blend-mode: screen; }

/* Typography primitives */
.eyebrow {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.mono {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
}
.display {
  font-family: var(--serif);
  font-weight: 300;
  line-height: 0.95;
  letter-spacing: -0.015em;
}
.display em, .italic { font-style: italic; font-weight: 300; }

h1, h2, h3 { font-family: var(--serif); font-weight: 300; line-height: 1; letter-spacing: -0.015em; }

p { font-family: var(--serif); font-size: clamp(17px, 1.25vw, 21px); line-height: 1.55; color: var(--ink-soft); }

/* Layout helpers */
.edge { padding-left: var(--edge); padding-right: var(--edge); }

.rule { height: 1px; background: var(--line); width: 100%; }

/* RTL */
[dir='rtl'] body { font-family: var(--serif-ar); }
[dir='rtl'] h1, [dir='rtl'] h2, [dir='rtl'] h3 { font-family: var(--serif-ar); font-weight: 300; letter-spacing: 0; }
[dir='rtl'] p { font-family: var(--serif-ar); line-height: 1.75; }
[dir='rtl'] .display { font-family: var(--serif-ar); letter-spacing: 0; line-height: 1.1; }
[dir='rtl'] .eyebrow, [dir='rtl'] .mono { font-family: var(--sans-ar); letter-spacing: 0; }
[dir='rtl'] .link-underline { font-family: var(--sans-ar); letter-spacing: 0; }

/* Force Cairo for every Arabic text context */
[dir='rtl'],
[dir='rtl'] body,
[dir='rtl'] h1, [dir='rtl'] h2, [dir='rtl'] h3, [dir='rtl'] h4, [dir='rtl'] h5, [dir='rtl'] h6,
[dir='rtl'] p, [dir='rtl'] a, [dir='rtl'] span, [dir='rtl'] li, [dir='rtl'] button,
[dir='rtl'] label, [dir='rtl'] input, [dir='rtl'] textarea,
[dir='rtl'] .display, [dir='rtl'] .eyebrow, [dir='rtl'] .mono {
  font-family: 'Cairo', sans-serif !important;
}
[dir='rtl'] .italic, [dir='rtl'] em { font-style: normal !important; font-weight: 500; }

/* Section frame */
section { position: relative; }

/* Buttons / links */
.link-underline {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--sans); font-weight: 500;
  font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--ink);
  transition: gap 300ms var(--ease);
}
.link-underline:hover { gap: 16px; }

/* Scroll indicator */
.scroll-indicator {
  position: fixed; top: 0; left: 0; right: 0; height: 2px;
  background: transparent; z-index: 100;
}
.scroll-indicator::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  background: var(--blueprint);
  width: var(--progress, 0%);
  transition: width 60ms linear;
}

/* Keyboard focus */
:focus-visible { outline: 2px solid var(--blueprint); outline-offset: 3px; }

/* Hide until in-view (for JS-driven reveals) */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 900ms var(--ease), transform 900ms var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal.delay-1 { transition-delay: 120ms; }
.reveal.delay-2 { transition-delay: 240ms; }
.reveal.delay-3 { transition-delay: 360ms; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition-duration: 1ms !important; }
  .reveal { opacity: 1; transform: none; }
}