/*
 * Genmetric Design Tokens
 * ============================================================
 * Single source of truth for all CSS custom properties.
 * Every component imports these variables — never hardcode values.
 * Mobile-first base; overrides in breakpoint files.
 *
 * @version   2.0.0
 * @package   Genmetric/Frontend
 */

:root {

  /* ----------------------------------------------------------
   * Color palette
   * ---------------------------------------------------------- */

  /* Brand */
  --color-primary:        #572FAC;
  --color-primary-light:  #7A4DFF;
  --color-primary-glow:   rgba(87, 47, 172, 0.22);
  --color-primary-subtle: #F0EBFF;

  /* Gradients */
  --gradient-primary:  linear-gradient(135deg, #572FAC 0%, #7A4DFF 100%);
  --gradient-surface:  linear-gradient(180deg, #F6F3FF 0%, #FFFFFF 100%);

  /* Backgrounds */
  --color-bg:           #FFFFFF;
  --color-bg-surface:   #F6F3FF;
  --color-bg-subtle:    #FAFAFA;
  --color-bg-dark:      #0F0B1F;

  /* Borders */
  --color-border:       #E7E3FF;
  --color-border-light: #F0EEFF;

  /* Text */
  --color-text-primary:   #111111;
  --color-text-secondary: #6C6C7B;
  --color-text-muted:     #9FA0B3;
  --color-text-inverse:   #FFFFFF;

  /* Status */
  --color-positive: #22C55E;
  --color-negative: #EF4444;
  --color-warning:  #F59E0B;
  --color-info:     #3B82F6;

  /* ----------------------------------------------------------
   * Typography
   * ---------------------------------------------------------- */
  --font-family-base: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* Scale — mobile base, overridden at breakpoints */
  --font-size-h1:   2.25rem;   /* 36px mobile -> 64px desktop */
  --font-size-h2:   1.75rem;   /* 28px mobile -> 48px desktop */
  --font-size-h3:   1.375rem;  /* 22px mobile -> 36px desktop */
  --font-size-h4:   1.125rem;  /* 18px mobile -> 28px desktop */
  --font-size-h5:   1rem;      /* 16px mobile -> 22px desktop */
  --font-size-body: 1rem;      /* 16px */
  --font-size-sm:   0.875rem;  /* 14px */
  --font-size-xs:   0.75rem;   /* 12px */

  --font-weight-regular:   400;
  --font-weight-medium:    500;
  --font-weight-semibold:  600;
  --font-weight-bold:      700;

  --line-height-tight:  1.2;
  --line-height-snug:   1.4;
  --line-height-normal: 1.6;
  --line-height-loose:  1.8;

  /* ----------------------------------------------------------
   * Spacing (8px base grid)
   * ---------------------------------------------------------- */
  --space-1:  0.5rem;   /* 8px  */
  --space-2:  1rem;     /* 16px */
  --space-3:  1.5rem;   /* 24px */
  --space-4:  2rem;     /* 32px */
  --space-6:  3rem;     /* 48px */
  --space-8:  4rem;     /* 64px */
  --space-12: 6rem;     /* 96px */
  --space-16: 8rem;     /* 128px */

  /* ----------------------------------------------------------
   * Layout
   * ---------------------------------------------------------- */
  --container-max:    1200px;
  --container-pad:    var(--space-2);  /* 16px mobile */
  --grid-cols:        4;               /* mobile */
  --grid-gap:         var(--space-2);

  /* ----------------------------------------------------------
   * Component primitives
   * ---------------------------------------------------------- */

  /* Radius */
  --radius-sm:   0.5rem;    /* 8px */
  --radius-md:   0.75rem;   /* 12px -- buttons */
  --radius-lg:   1rem;      /* 16px -- cards */
  --radius-xl:   1.5rem;    /* 24px */
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm:   0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-md:   0 10px 30px rgba(0, 0, 0, 0.08);
  --shadow-lg:   0 20px 60px rgba(0, 0, 0, 0.12);
  --shadow-glow: 0 8px 32px rgba(87, 47, 172, 0.30);
  --shadow-card-dark: 0 20px 60px rgba(0, 0, 0, 0.40);

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

  /* Z-index scale */
  --z-base:    0;
  --z-above:   10;
  --z-nav:     100;
  --z-overlay: 200;
  --z-modal:   300;
  --z-toast:   400;
}

/* ----------------------------------------------------------
 * Tablet (640px+) overrides
 * ---------------------------------------------------------- */
@media (min-width: 640px) {
  :root {
    --container-pad: var(--space-3);
    --grid-cols: 8;
    --grid-gap:  var(--space-3);

    --font-size-h1: 3rem;    /* 48px */
    --font-size-h2: 2.25rem; /* 36px */
    --font-size-h3: 1.75rem; /* 28px */
    --font-size-h4: 1.375rem;
    --font-size-h5: 1.125rem;
  }
}

/* ----------------------------------------------------------
 * Desktop (1024px+) overrides
 * ---------------------------------------------------------- */
@media (min-width: 1024px) {
  :root {
    --container-pad: var(--space-4);
    --grid-cols: 12;
    --grid-gap:  var(--space-4);

    --font-size-h1: 4rem;    /* 64px */
    --font-size-h2: 3rem;    /* 48px */
    --font-size-h3: 2.25rem; /* 36px */
    --font-size-h4: 1.75rem; /* 28px */
    --font-size-h5: 1.375rem;/* 22px */
  }
}