/* ============================================================
   MMTH Design Tokens
   Single source of truth for Mammoth Sports Construction UI
   ============================================================ */

/* --- Local Font Fallbacks ---
   Primary loading: Typekit CDN (<link> in HTML)
   These @font-face rules activate when Typekit is unavailable
   ------------------------------------------------------------ */

@font-face {
  font-family: 'field-gothic-xcondensed';
  src: url('fonts/FieldGothic-XCondensed.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'cake-mono';
  src: url('fonts/CakeMono-Bold.woff2') format('woff2'),
       url('fonts/CakeMono-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'aktiv-grotesk';
  src: url('fonts/AktivGrotesk-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'aktiv-grotesk';
  src: url('fonts/AktivGrotesk-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'aktiv-grotesk';
  src: url('fonts/AktivGrotesk-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* --- Design Tokens --- */

:root {
  /* Core Colors */
  --mmth-black: #000000;
  --mmth-white: #FFFFFF;
  --mmth-green: #DAE247;

  /* Gray Scale — 9 steps */
  --mmth-gray-900: #1A1A1A;
  --mmth-gray-800: #333333;
  --mmth-gray-700: #4D4D4D;
  --mmth-gray-600: #666666;
  --mmth-gray-500: #808080;
  --mmth-gray-400: #999999;
  --mmth-gray-300: #B3B3B3;
  --mmth-gray-200: #CCCCCC;
  --mmth-gray-100: #E6E6E6;

  /* Extended Palette — from mmth.co website */
  --mmth-olive: #40463B;
  --mmth-cream: #EDE9E4;

  /* Semantic — Backgrounds */
  --mmth-bg-primary: #FFFFFF;
  --mmth-bg-secondary: #F5F5F5;
  --mmth-bg-tertiary: #E6E6E6;
  --mmth-bg-inverse: #000000;

  /* Semantic — Text */
  --mmth-text-primary: #000000;
  --mmth-text-secondary: #4D4D4D;
  --mmth-text-tertiary: #808080;
  --mmth-text-inverse: #FFFFFF;
  --mmth-text-disabled: #B3B3B3;

  /* Semantic — Borders */
  --mmth-border-light: #E6E6E6;
  --mmth-border-medium: #CCCCCC;
  --mmth-border-heavy: #000000;

  /* Accent — green used sparingly (<2% of UI) */
  --mmth-accent: #DAE247;
  --mmth-accent-10: rgba(218, 226, 71, 0.10);
  --mmth-accent-20: rgba(218, 226, 71, 0.20);

  /* Status */
  --mmth-success: #DAE247;
  --mmth-error: #D93025;
  --mmth-warning: #F07539;

  /* Font Families */
  --mmth-font-display: 'aktiv-grotesk', 'Helvetica Neue', 'Arial', sans-serif;
  --mmth-font-label: 'cake-mono', 'Courier New', monospace;
  --mmth-font-body: 'aktiv-grotesk', 'Helvetica Neue', 'Arial', sans-serif;

  /* Type Scale — Display (Aktiv Grotesk Bold, ALL CAPS) */
  --mmth-display-xl-size: 3.5rem;      /* 56px */
  --mmth-display-xl-leading: 0.9;
  --mmth-display-xl-tracking: normal;

  --mmth-display-l-size: 2.5rem;       /* 40px */
  --mmth-display-l-leading: 0.92;
  --mmth-display-l-tracking: normal;

  --mmth-display-m-size: 1.75rem;      /* 28px */
  --mmth-display-m-leading: 0.95;
  --mmth-display-m-tracking: normal;

  --mmth-display-s-size: 1.25rem;      /* 20px */
  --mmth-display-s-leading: 1;
  --mmth-display-s-tracking: normal;

  /* Type Scale — Labels (Cake Mono, ALL CAPS) */
  --mmth-label-l-size: 0.875rem;       /* 14px */
  --mmth-label-l-leading: 1.4;
  --mmth-label-l-tracking: 0.08em;

  --mmth-label-m-size: 0.75rem;        /* 12px */
  --mmth-label-m-leading: 1.4;
  --mmth-label-m-tracking: 0.1em;

  --mmth-label-s-size: 0.625rem;       /* 10px */
  --mmth-label-s-leading: 1.4;
  --mmth-label-s-tracking: 0.12em;

  /* Type Scale — Body (Aktiv Grotesk) */
  --mmth-body-l-size: 1.125rem;        /* 18px */
  --mmth-body-l-leading: 1.6;

  --mmth-body-m-size: 1rem;            /* 16px */
  --mmth-body-m-leading: 1.6;

  --mmth-body-s-size: 0.875rem;        /* 14px */
  --mmth-body-s-leading: 1.5;

  --mmth-body-xs-size: 0.75rem;        /* 12px */
  --mmth-body-xs-leading: 1.5;

  /* Spacing — 8px base */
  --mmth-space-1: 4px;
  --mmth-space-2: 8px;
  --mmth-space-3: 12px;
  --mmth-space-4: 16px;
  --mmth-space-5: 24px;
  --mmth-space-6: 32px;
  --mmth-space-7: 48px;
  --mmth-space-8: 64px;
  --mmth-space-9: 96px;

  /* Border Radius — 2px max, industrial feel */
  --mmth-radius: 2px;
  --mmth-radius-none: 0;

  /* Shadows */
  --mmth-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --mmth-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.10);
  --mmth-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.14);

  /* Transitions */
  --mmth-transition-fast: 120ms ease;
  --mmth-transition-base: 200ms ease;
  --mmth-transition-slow: 350ms ease;

  /* Layout */
  --mmth-container-max: 1200px;
  --mmth-sidebar-width: 260px;
  --mmth-topbar-height: 56px;
}

/* --- Dark Mode Token Overrides --- */

[data-theme="dark"] {
  --mmth-bg-primary: #0A0A0A;
  --mmth-bg-secondary: #141414;
  --mmth-bg-tertiary: #1F1F1F;
  --mmth-bg-inverse: #FFFFFF;

  --mmth-text-primary: #F5F5F5;
  --mmth-text-secondary: #B3B3B3;
  --mmth-text-tertiary: #808080;
  --mmth-text-inverse: #000000;
  --mmth-text-disabled: #4D4D4D;

  --mmth-border-light: #1F1F1F;
  --mmth-border-medium: #333333;
  --mmth-border-heavy: #F5F5F5;

  --mmth-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30);
  --mmth-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.40);
  --mmth-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.50);
}