/* ============================================
   Marijenburg Games - Design Tokens
   Monochrome severe + editorial serif
   ============================================ */

:root {
  /* --- Colors (monochrome only) --- */
  --ink-black:    #050505;
  --ink-deep:     #0c0c0c;
  --ink-elevated: #141414;
  --ink-border:   #1f1f1f;
  --ink-border-strong: #2e2e2e;

  --text-primary:   #f5f5f5;
  --text-secondary: #a8a8a8;
  --text-tertiary:  #5a5a5a;

  --accent-hover:   #ffffff;

  /* --- Typography --- */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    ui-monospace, 'SFMono-Regular', 'Cascadia Mono', Menlo, Consolas, monospace;

  /* Fluid type scale (320px -> 1440px viewport) */
  --text-xs:   clamp(0.72rem, 0.69rem + 0.15vw, 0.8rem);
  --text-sm:   clamp(0.82rem, 0.78rem + 0.2vw, 0.92rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg:   clamp(1.125rem, 1.05rem + 0.4vw, 1.35rem);
  --text-xl:   clamp(1.35rem, 1.2rem + 0.7vw, 1.75rem);
  --text-2xl:  clamp(1.6rem, 1.35rem + 1.1vw, 2.25rem);
  --text-3xl:  clamp(2rem, 1.6rem + 1.8vw, 3rem);
  --text-4xl:  clamp(2.5rem, 1.9rem + 2.8vw, 4rem);
  --text-5xl:  clamp(3rem, 2rem + 4.5vw, 5.5rem);
  --text-6xl:  clamp(3.5rem, 2rem + 6vw, 7rem);

  --leading-tight:    1.12;
  --leading-snug:     1.3;
  --leading-normal:   1.55;
  --leading-relaxed:  1.75;

  --tracking-tightest: -0.04em;
  --tracking-tight:    -0.02em;
  --tracking-normal:   0;
  --tracking-wide:     0.05em;
  --tracking-widest:   0.18em;

  /* --- Spacing (4px base) --- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;
  --space-40: 10rem;

  /* --- Layout --- */
  --container-max:    1240px;
  --container-wide:   1440px;
  --container-narrow: 720px;
  --container-text:   640px;

  --section-pad-y:    clamp(4rem, 6vw + 2rem, 10rem);

  /* --- Borders --- */
  --radius-none: 0;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;

  --border-subtle: 1px solid var(--ink-border);
  --border-strong: 1px solid var(--ink-border-strong);
  --border-hover:  1px solid var(--text-tertiary);

  /* --- Shadows --- */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.7);

  /* --- Transitions --- */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 500ms ease;
  --transition-emph: 600ms cubic-bezier(0.16, 1, 0.3, 1);

  /* --- Z-index --- */
  --z-base:     0;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-loading:  500;
  --z-grain:    1000;
}