/* ============================================================
   TEAM MDOG — DESIGN TOKENS
   ------------------------------------------------------------
   This file is the *portable* layer. Sister sites (Dance Flow UK,
   TM Motorsport) drop in their own copy and only swap:
     – the --color-accent* family
     – the brand wordmark / hero asset (asset paths, not tokens)
   Everything else stays identical to keep the brand system
   coherent across the four-site portfolio.
   ============================================================ */

:root {
  /* --- Surfaces -------------------------------------------- */
  --color-bg:        #131822;
  --color-surface:   #1d2330;
  --color-surface-2: #242b3a;
  --color-surface-3: #181c26;
  --color-border:    rgba(255, 255, 255, 0.08);

  /* --- Accent — the only block that changes per sister site --- */
  --color-accent:        #1a8cff;
  --color-accent-bright: #4da8ff;
  --color-accent-dim:    #0d5fa3;
  --color-accent-glow:   rgba(26, 140, 255, 0.15);
  --color-accent-soft:   rgba(26, 140, 255, 0.08);
  --color-accent-faint:  rgba(26, 140, 255, 0.04);

  /* --- Text ------------------------------------------------ */
  --color-fg:        #ffffff;
  --color-fg-muted:  #c8d4e8;
  --color-fg-dim:    #9aa9c0;

  /* --- Semantic ------------------------------------------- */
  --color-error:     #ff7070;
  --color-error-bg:  rgba(220, 50, 50, 0.10);
  --color-error-bd:  rgba(220, 50, 50, 0.30);

  /* --- Type ----------------------------------------------- */
  --font-display: 'Bebas Neue', system-ui, sans-serif;
  --font-body:    'Barlow', system-ui, sans-serif;
  --font-cond:    'Barlow Condensed', system-ui, sans-serif;

  /* --- Shape — the clip-path angle is a brand signature --- */
  --clip-angle-sm: polygon(6px 0%, 100% 0%, calc(100% - 6px) 100%, 0% 100%);
  --clip-angle-md: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
  --clip-angle-lg: polygon(10px 0%, 100% 0%, calc(100% - 10px) 100%, 0% 100%);

  /* --- Layout --------------------------------------------- */
  --container:   1300px;
  --gutter:      4rem;
  --gutter-sm:   1.5rem;
  --section-y:   6rem;
  --nav-h:       70px;

  /* --- Motion --------------------------------------------- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:    0.15s;
  --dur-base:    0.2s;
  --dur-slow:    0.3s;

  /* --- Layers --------------------------------------------- */
  --z-nav:       100;
  --z-overlay:   500;
  --z-loader:    9999;
}