/* ═══════════════════════════════════════════════════════════ */
/* FILE: design-tokens.css                                    */
/* JURI PROJE — Interior Architecture                          */
/* ═══════════════════════════════════════════════════════════ */
/*                                                             */
/* DESIGN SYSTEM: "Warm Utilitarianism"                        */
/*                                                             */
/* A synthesis of three schools:                               */
/*   1. BRUTALISM — Structural honesty, exposed grid           */
/*   2. MODERN JAPANESE — Ma (negative space), In'ei Raisan    */
/*   3. DIETER RAMS — Less, but better. Mathematical grid.     */
/*                                                             */
/* The accent color (Braun Orange #FF4A00) is used ONLY for:   */
/*   → Hover states                                            */
/*   → Active CTAs                                             */
/*   → Focus rings                                             */
/*   → NEVER decorative                                        */
/*                                                             */
/* ═══════════════════════════════════════════════════════════ */

:root {
  /* ─── COLOR PALETTE ──────────────────────────────────────── */
  --color-bg-primary:      #E8E4DD;   /* Concrete Ash — warm off-white      */
  --color-bg-secondary:    #D4CFC6;   /* Raw Linen — section alternator     */
  --color-bg-deep:         #141210;   /* Charred Timber — near black        */
  --color-surface:         #1E1B18;   /* Elevated dark surface              */
  --color-border:          #A09890;   /* 1px hairline — blueprint grey      */
  --color-text-primary:    #141210;   /* On light backgrounds               */
  --color-text-inverse:    #E8E4DD;   /* On dark backgrounds                */
  --color-text-muted:      #6B6158;   /* Secondary text, captions           */
  --color-accent:          #FF4A00;   /* Braun Orange — ONE accent          */
  --color-accent-muted:    #CC3B00;   /* Accent pressed state               */

  /* ─── TYPOGRAPHY ─────────────────────────────────────────── */
  --font-display:          'Bebas Neue', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body:             'DM Mono', 'IBM Plex Mono', 'Courier New', monospace;

  --text-xs:               11px;
  --text-xs-lh:            1.4;
  --text-xs-ls:            0.15em;

  --text-sm:               13px;
  --text-sm-lh:            1.6;
  --text-sm-ls:            0.08em;

  --text-md:               16px;
  --text-md-lh:            1.7;
  --text-md-ls:            0.04em;

  --text-lg:               24px;
  --text-lg-lh:            1.3;
  --text-lg-ls:            0.02em;

  --text-xl:               48px;
  --text-xl-lh:            1.1;
  --text-xl-ls:            -0.01em;

  --text-2xl:              80px;
  --text-2xl-lh:           0.95;
  --text-2xl-ls:           -0.03em;

  --text-3xl:              120px;
  --text-3xl-lh:           0.9;
  --text-3xl-ls:           -0.04em;

  /* ─── SPACING (8px base grid) ────────────────────────────── */
  --space-1:               8px;
  --space-2:               16px;
  --space-3:               24px;
  --space-4:               32px;
  --space-5:               48px;
  --space-6:               64px;
  --space-7:               96px;
  --space-8:               128px;
  --space-9:               192px;

  /* ─── GRID ───────────────────────────────────────────────── */
  --grid-columns:          12;
  --grid-gutter:           24px;
  --grid-max-width:        1440px;
  --grid-margin:           clamp(24px, 5vw, 80px);

  /* ─── ANIMATION TOKENS ───────────────────────────────────── */
  --ease-mechanical:       cubic-bezier(0.25, 0, 0.0, 1.0);
  --ease-reveal:           cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast:         120ms;
  --duration-base:         240ms;
  --duration-slow:         480ms;
  --duration-page:         640ms;

  /* ─── Z-INDEX SCALE ──────────────────────────────────────── */
  --z-base:                1;
  --z-floating:            50;
  --z-nav:                 100;
  --z-overlay:             200;
  --z-transition:          999;
  --z-cursor:              9999;
}