/* ============================================
   KOMMS-HAUS v3 — "SIGNAL" DESIGN TOKENS
   Monochrome + Signal Orange · Obys-inspired
   ============================================ */

:root {
  /* --- Color --- */
  --black: #0A0A0A;
  --white: #FAFAF7;
  --signal: #E85D26;

  /* Ink opacity scale (Obys opacity-as-hierarchy) */
  --ink-100: rgba(10, 10, 10, 1);
  --ink-80:  rgba(10, 10, 10, 0.8);
  --ink-60:  rgba(10, 10, 10, 0.6);
  --ink-50:  rgba(10, 10, 10, 0.5);
  --ink-40:  rgba(10, 10, 10, 0.4);
  --ink-20:  rgba(10, 10, 10, 0.2);
  --ink-10:  rgba(10, 10, 10, 0.1);
  --ink-5:   rgba(10, 10, 10, 0.05);
  --ink-3:   rgba(10, 10, 10, 0.03);

  /* White opacity (for dark surfaces) */
  --w-100: rgba(250, 250, 247, 1);
  --w-80:  rgba(250, 250, 247, 0.8);
  --w-60:  rgba(250, 250, 247, 0.6);
  --w-40:  rgba(250, 250, 247, 0.4);
  --w-20:  rgba(250, 250, 247, 0.2);
  --w-10:  rgba(250, 250, 247, 0.1);
  --w-5:   rgba(250, 250, 247, 0.05);

  /* Glassmorphism */
  --glass-bg: rgba(250, 250, 247, 0.72);
  --glass-blur: 30px;
  --glass-border: rgba(10, 10, 10, 0.06);
  --glass-shadow: 0 30px 60px rgba(10, 10, 10, 0.12);

  /* --- Typography --- */
  --font-display: "Rethink Sans", system-ui, sans-serif;
  --font-body: "Rethink Sans", system-ui, sans-serif;
  --font-mono: "Geist Mono", monospace;
  --font-rtl: "Vazirmatn", system-ui, sans-serif;

  /* Type scale (Obys extreme contrast) */
  --text-hero: clamp(56px, 14vw, 180px);
  --text-section: clamp(32px, 6vw, 72px);
  --text-large: clamp(20px, 3vw, 32px);
  --text-body: 13px;
  --text-mono: 12px;
  --text-tiny: 11px;

  /* Font weights */
  --weight-thin: 200;
  --weight-regular: 400;
  --weight-bold: 700;
  --weight-heavy: 900;

  /* Letter spacing */
  --track-hero: -0.04em;
  --track-section: -0.03em;
  --track-body: -0.01em;
  --track-mono: 0em;
  --track-tiny: -0.01em;

  /* Line heights */
  --leading-hero: 0.88;
  --leading-section: 0.95;
  --leading-body: 1.5;
  --leading-mono: 1.4;

  /* --- Grid (Obys 10px rigor) --- */
  --grid-cols: 12;
  --grid-gap: 10px;
  --grid-margin: 10px;
  --section-gap: clamp(80px, 15vw, 240px);
  --section-gap-sm: 40px;

  /* --- Motion --- */
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out: ease-out;
  --ease-standard: ease;
  --dur-fast: 0.2s;
  --dur-medium: 0.4s;
  --dur-slow: 0.8s;
  --dur-cursor: 0.1s;

  /* --- Z-index layering --- */
  --z-base: 1;
  --z-content: 10;
  --z-archive: 20;
  --z-meta: 30;
  --z-nav: 40;
  --z-focus-overlay: 100;
  --z-focus-panel: 101;
  --z-focus-image: 102;
  --z-editorial: 50;
  --z-cursor: 9998;
  --z-preloader: 9999;
  --z-transition: 999999;

  /* --- Layout --- */
  --nav-height: 60px;
  --max-width: 1920px;
  --content-max: 1360px;

  /* Responsive grid margin — scales with viewport */
  --grid-margin: clamp(20px, 4vw, 80px);
}

/* Dark mode overrides */
[data-theme="dark"] {
  --black: #FAFAF7;
  --white: #0A0A0A;
  --ink-100: rgba(250, 250, 247, 1);
  --ink-80:  rgba(250, 250, 247, 0.8);
  --ink-60:  rgba(250, 250, 247, 0.6);
  --ink-50:  rgba(250, 250, 247, 0.5);
  --ink-40:  rgba(250, 250, 247, 0.4);
  --ink-20:  rgba(250, 250, 247, 0.2);
  --ink-10:  rgba(250, 250, 247, 0.1);
  --ink-5:   rgba(250, 250, 247, 0.05);
  --ink-3:   rgba(250, 250, 247, 0.03);
  --glass-bg: rgba(10, 10, 10, 0.72);
  --glass-border: rgba(250, 250, 247, 0.06);
  --glass-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
}