/* ==========================================================================
   TECHNOGRAIL — DESIGN TOKENS
   Palette extracted directly from the HAZHTeq logo (bronze diamond mark).
   See docs/DESIGN_SYSTEM.md for the full rationale.
   ========================================================================== */

:root {
  /* ---- Color: Core (from logo) ---- */
  --tg-black:          #0A0807;   /* background void — warm near-black, not pure #000 */
  --tg-surface-0:      #100D0A;   /* base surface, cards resting state */
  --tg-surface-1:      #17120D;   /* raised surface / panels */
  --tg-surface-2:      #221A13;   /* hover / glass panel fill */
  --tg-line:           rgba(201, 163, 130, 0.14); /* hairline borders on black */

  --tg-bronze-primary: #5C2A21;   /* dark rust bronze — the mark's dominant fill */
  --tg-bronze-secondary: #8B4A2E; /* mid warm bronze — the mark's mid-tone facet */
  --tg-copper-glow:    #B8733B;   /* true "copper" — accent, glow, CTA */
  --tg-copper-glow-soft: #D9A265; /* lifted copper for highlights/text-on-dark accents */

  --tg-text-primary:   #F3EAE2;   /* warm off-white */
  --tg-text-muted:     #9C8A7D;   /* warm muted brown-grey */
  --tg-text-faint:     #5C5049;

  /* ---- Gradients ---- */
  --tg-gradient-copper: linear-gradient(135deg, var(--tg-bronze-secondary) 0%, var(--tg-copper-glow) 55%, var(--tg-copper-glow-soft) 100%);
  --tg-gradient-void:   radial-gradient(ellipse 80% 60% at 50% 0%, rgba(92,42,33,0.35) 0%, rgba(10,8,7,0) 70%);
  --tg-gradient-glass:  linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.01) 100%);

  /* ---- Typography ---- */
  --font-display: 'Space Grotesk', 'Inter', sans-serif;
  --font-body:    'Inter', -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  --fs-hero:   clamp(2.8rem, 8vw, 7.5rem);
  --fs-h1:     clamp(2.2rem, 5vw, 4.5rem);
  --fs-h2:     clamp(1.6rem, 3.4vw, 2.75rem);
  --fs-h3:     clamp(1.2rem, 2vw, 1.65rem);
  --fs-body-lg: clamp(1.05rem, 1.4vw, 1.3rem);
  --fs-body:   1rem;
  --fs-small:  0.85rem;
  --fs-mono:   0.8rem;

  --lh-tight: 1.05;
  --lh-normal: 1.5;
  --lh-loose: 1.7;

  /* ---- Spacing scale ---- */
  --sp-1: 0.5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2.5rem;
  --sp-5: 4rem;
  --sp-6: 6.5rem;
  --sp-7: 10rem;

  /* ---- Layout ---- */
  --container-max: 1360px;
  --container-pad: clamp(1.5rem, 5vw, 4rem);
  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  /* ---- Motion ---- */
  --ease-quest: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-snap:  cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 0.25s;
  --dur-med:  0.6s;
  --dur-slow: 1.1s;

  /* ---- Z-index scale ---- */
  --z-cursor: 9999;
  --z-loader: 9000;
  --z-nav: 500;
  --z-modal: 800;
  --z-canvas: 1;
  --z-content: 10;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0.01s;
    --dur-med: 0.01s;
    --dur-slow: 0.01s;
  }
}