/* ==========================================================================
   Design tokens — Case Files
   Dark charcoal / deep navy base, warm ivory type, evidence red as a sparse accent.
   ========================================================================== */
:root {
  /* Palette */
  --c-ink-950: #090B0F;
  --c-ink-900: #0D1015;
  --c-ink-850: #11151B;
  --c-ink-800: #161B22;
  --c-ink-700: #1E252E;
  --c-ink-600: #29313C;
  --c-navy-950: #070E1A;
  --c-navy-900: #0A1322;
  --c-navy-800: #0F1B30;
  --c-navy-700: #17263F;
  --c-navy-600: #223555;
  --c-ivory: #F4EEE3;
  --c-paper: #ECE3D2;
  --c-paper-2: #E2D7C1;
  --c-paper-3: #D3C5AA;
  --c-beige: #C8BAA0;
  --c-sand: #A3967D;
  --c-metal: #8A919B;
  --c-metal-2: #B5BBC4;
  --c-evidence: #B0281F;
  --c-evidence-2: #CF3B2F;
  --c-success: #5F9E78;
  --c-warning: #CDA349;
  --c-info: #6F90B9;

  /* Semantic */
  --bg: var(--c-ink-900);
  --bg-deep: var(--c-ink-950);
  --surface: var(--c-ink-850);
  --surface-2: var(--c-ink-800);
  --surface-3: var(--c-ink-700);
  --border: rgba(244, 238, 227, 0.09);
  --border-strong: rgba(244, 238, 227, 0.18);
  --text: #E7E2D8;
  --text-muted: #A8A296;
  --text-dim: #7A756C;
  --heading: var(--c-ivory);
  --accent: var(--c-evidence);
  --accent-2: var(--c-evidence-2);
  --accent-soft: rgba(176, 40, 31, 0.14);
  --focus: #E6D3A8;
  --paper-ink: #2B2620;
  --paper-ink-muted: #6B6153;
  --overlay: rgba(5, 7, 10, 0.72);

  /* Typography */
  --font-display-en: 'DM Serif Display', 'Iowan Old Style', 'Times New Roman', serif;
  --font-body-en: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display-ar: 'Amiri', 'Traditional Arabic', 'Times New Roman', serif;
  --font-body-ar: 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-display: var(--font-display-en);
  --font-body: var(--font-body-en);

  --fs-2xs: 0.6875rem;
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-md: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.3125rem;
  --fs-2xl: clamp(1.5rem, 1.25rem + 1vw, 1.95rem);
  --fs-3xl: clamp(1.9rem, 1.45rem + 1.9vw, 2.7rem);
  --fs-4xl: clamp(2.4rem, 1.6rem + 3.4vw, 4.1rem);
  --fs-5xl: clamp(2.7rem, 1.5rem + 5.2vw, 5.6rem);
  --lh-tight: 1.12;
  --lh-snug: 1.3;
  --lh-body: 1.65;
  --tracking-label: 0.14em;

  /* Spacing — 4px base */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;
  --section-y: clamp(3.5rem, 2rem + 6vw, 7rem);

  /* Shape & depth */
  --radius-xs: 3px;
  --radius-sm: 5px;
  --radius: 9px;
  --radius-lg: 14px;
  --radius-xl: 22px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow: 0 10px 28px -12px rgba(0, 0, 0, 0.65), 0 2px 6px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 34px 70px -28px rgba(0, 0, 0, 0.85), 0 12px 24px -12px rgba(0, 0, 0, 0.55);
  --shadow-paper: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 22px 44px -22px rgba(0, 0, 0, 0.75);

  /* Motion */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 140ms;
  --dur: 240ms;
  --dur-slow: 520ms;

  /* Layout */
  --container: 1240px;
  --container-narrow: 820px;
  --gutter: clamp(1rem, 3.5vw, 2.5rem);
  --header-h: 68px;
  --touch: 44px;

  /* Textures */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --paper-fibers: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='turbulence' baseFrequency='.012 .35' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .28 0 0 0 0 .18 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
  --contours: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600' viewBox='0 0 600 600' fill='none' stroke='%23F4EEE3' stroke-opacity='.06' stroke-width='1'%3E%3Cpath d='M-20 120c80-40 160 30 240 0s140-90 220-40 120 60 180 30'/%3E%3Cpath d='M-20 170c90-35 150 40 250 5s130-80 210-35 130 70 180 35'/%3E%3Cpath d='M-20 230c70-30 170 45 260 10s150-70 220-30 110 55 160 25'/%3E%3Cpath d='M-20 300c100-50 170 35 250 10s160-60 230-20 90 40 160 10'/%3E%3Cpath d='M-20 380c80-20 160 50 240 20s150-90 230-50 120 60 170 40'/%3E%3Cpath d='M-20 450c90-40 160 30 250 0s140-70 220-30 110 50 170 20'/%3E%3Cpath d='M-20 520c70-30 180 40 260 10s150-80 230-40 100 50 150 30'/%3E%3Cellipse cx='420' cy='250' rx='60' ry='36'/%3E%3Cellipse cx='420' cy='250' rx='34' ry='18'/%3E%3Cellipse cx='140' cy='420' rx='70' ry='30'/%3E%3C/svg%3E");
}

/* Arabic typography */
html[lang='ar'] {
  --font-display: var(--font-display-ar);
  --font-body: var(--font-body-ar);
  --tracking-label: 0.02em;
  --lh-body: 1.85;
}

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