/* =========================================================
   MAXITECH — Design Tokens & CSS Variables
   Premium Tech Enterprise System
   ========================================================= */

:root {
  /* ── Color Palette ── */
  /* Navy / Authority */
  --color-navy:          #0B1F3A;
  --color-navy-deep:     #07111F;
  --color-navy-light:    #132D4F;

  /* Blue / Action */
  --color-blue:          #0E5EFF;
  --color-blue-hover:    #3B7BFF;
  --color-blue-dark:     #0A4BD4;

  /* Cyan / Tech Accent */
  --color-cyan:          #00C2FF;
  --color-cyan-light:    #5DD8FF;
  --color-turquoise:     #14D8C4;

  /* Neutrals */
  --color-white:         #FFFFFF;
  --color-bg-light:      #F7F9FC;
  --color-bg-subtle:     #EEF2F7;
  --color-border-light:  #E2E8F0;
  --color-border-subtle: rgba(14, 94, 255, 0.08);

  /* Text */
  --color-text-primary:   #111827;
  --color-text-secondary: #374151;
  --color-text-muted:     #6B7280;
  --color-text-light:     #FFFFFF;
  --color-text-light-secondary: rgba(255, 255, 255, 0.75);
  --color-text-light-muted: rgba(255, 255, 255, 0.5);

  /* Dark section specific */
  --color-dark-bg:       #07111F;
  --color-dark-card:     rgba(255, 255, 255, 0.04);
  --color-dark-card-hover: rgba(255, 255, 255, 0.08);
  --color-dark-border:   rgba(255, 255, 255, 0.08);
  --color-dark-border-hover: rgba(0, 194, 255, 0.25);

  /* Glows */
  --glow-blue:    rgba(14, 94, 255, 0.15);
  --glow-cyan:    rgba(0, 194, 255, 0.12);
  --glow-strong:  rgba(14, 94, 255, 0.25);

  /* ── Typography ── */
  --font-display: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

  --fs-xs:   0.75rem;    /* 12px */
  --fs-sm:   0.875rem;   /* 14px */
  --fs-base: 1rem;       /* 16px */
  --fs-md:   1.125rem;   /* 18px */
  --fs-lg:   1.25rem;    /* 20px */
  --fs-xl:   1.5rem;     /* 24px */
  --fs-2xl:  2rem;       /* 32px */
  --fs-3xl:  2.5rem;     /* 40px */
  --fs-4xl:  3.25rem;    /* 52px */
  --fs-5xl:  4rem;       /* 64px */
  --fs-hero: 4.5rem;

  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extrabold: 800;

  --lh-tight:    1.1;
  --lh-snug:     1.25;
  --lh-heading:  1.2;
  --lh-normal:   1.6;
  --lh-relaxed:  1.75;

  --ls-tight:    0;
  --ls-snug:     0;
  --ls-normal:   0;
  --ls-wide:     0.02em;
  --ls-wider:    0.04em;
  --ls-widest:   0.08em;

  /* ── Spacing ── */
  --space-2xs: 0.25rem;   /* 4px */
  --space-xs:  0.5rem;    /* 8px */
  --space-sm:  0.75rem;   /* 12px */
  --space-md:  1rem;       /* 16px */
  --space-lg:  1.5rem;    /* 24px */
  --space-xl:  2rem;      /* 32px */
  --space-2xl: 3rem;      /* 48px */
  --space-3xl: 4rem;      /* 64px */
  --space-4xl: 6rem;      /* 96px */
  --space-5xl: 8rem;      /* 128px */
  --space-6xl: 10rem;     /* 160px */

  /* ── Layout ── */
  --max-width:     1200px;
  --max-width-sm:  640px;
  --max-width-md:  768px;
  --max-width-lg:  1024px;
  --max-width-xl:  1200px;
  --max-width-2xl: 1400px;
  --content-width: 720px;

  /* ── Borders & Radius ── */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   20px;
  --radius-2xl:  24px;
  --radius-3xl:  32px;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-xs:   0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm:   0 2px 4px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md:   0 4px 12px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.04);
  --shadow-lg:   0 12px 24px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.04);
  --shadow-xl:   0 20px 40px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.06);
  --shadow-glow: 0 4px 20px var(--glow-blue);
  --shadow-glow-strong: 0 8px 40px var(--glow-strong);
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.04), 0 6px 16px rgba(0, 0, 0, 0.04);
  --shadow-card-hover: 0 8px 30px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);

  /* ── Transitions ── */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast:   180ms;
  --duration-base:   260ms;
  --duration-slow:   400ms;
  --duration-reveal: 700ms;
}

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
    --duration-reveal: 0ms;
  }
}