/* ===========================================================================
   TARK.EE CSS VARIABLES (Design Tokens)
   Version: 1.0
   Created: October 2025
   Purpose: Centralized design tokens for consistent theming
   =========================================================================== */

:root {
  /* ===== COLORS ===== */
  --tark-primary: #2196f3;
  --tark-primary-2: #239bd3;
  --tark-text: #3C4147;
  --tark-muted: #6b7280;
  --tark-bg: #f8fafc;
  --tark-border: #e5e7eb;
  --tark-green: #3cab28;
  --tark-green-dark: #2a8f1e;
  --tark-white: #ffffff;
  --tark-black: rgba(0, 0, 0, 0.5);

  /* ===== SPACING ===== */
  --tark-gap: 16px;
  --tark-gap-sm: 8px;
  --tark-gap-lg: 24px;
  --tark-gap-xl: 32px;

  /* ===== GRID LAYOUT ===== */
  --sidebar-width: 300px;
  --mobile-breakpoint: 980px;
  --max-content-width: 1218px;

  /* ===== BORDERS & SHADOWS ===== */
  --tark-radius: 12px;
  --tark-radius-sm: 8px;
  --tark-radius-lg: 16px;
  --tark-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
  --tark-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
  --tark-shadow-lg: 0 8px 20px rgba(0, 0, 0, 0.1);

  /* ===== Z-INDEX LAYERS ===== */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 500;
  --z-scrim: 999;
  --z-sidebar: 1000;
  --z-modal: 1100;
  --z-toast: 1200;

  /* ===== TYPOGRAPHY ===== */
  --font-body: Arial, Helvetica, sans-serif;
  --font-heading: "ArchivoNarrowTuned", "Arial Narrow", "Roboto Condensed", Arial, sans-serif;

  /* ===== TRANSITIONS ===== */
  --transition-fast: 0.15s ease;
  --transition-base: 0.2s ease;
  --transition-slow: 0.3s ease;
}

/* ===========================================================================
   USAGE EXAMPLE:

   .my-element {
     color: var(--tark-primary);
     padding: var(--tark-gap);
     border-radius: var(--tark-radius);
     box-shadow: var(--tark-shadow);
     transition: all var(--transition-base);
   }
   =========================================================================== */