/* ==========================================================================
   SARATECH.IN — DESIGN TOKENS
   System: "The Algorithmic Boardroom"
   ========================================================================== */

:root {
  /* -----------------------------------------------------------------------
     COLOR PALETTE
     ----------------------------------------------------------------------- */

  /* Foundation — the void that commands authority */
  --color-void:           #0B0E14;
  --color-void-rgb:       11, 14, 20;

  /* Primary Accent — kinetic energy, action, speed */
  --color-volt:           #D4FF00;
  --color-volt-rgb:       212, 255, 0;
  --color-volt-glow:      rgba(212, 255, 0, 0.20);
  --color-volt-glow-intense: rgba(212, 255, 0, 0.35);

  /* Secondary — structure, corporate restraint */
  --color-slate:          #4A5568;
  --color-slate-rgb:      74, 85, 104;
  --color-slate-light:    #718096;

  /* Text — sharp, clinical clarity */
  --color-alabaster:      #F4F5F6;
  --color-alabaster-rgb:  244, 245, 246;
  --color-alabaster-muted: rgba(244, 245, 246, 0.60);

  /* Surfaces — subtle elevation over void */
  --color-surface:        #111620;
  --color-surface-hover:  #181D2A;
  --color-surface-border: rgba(74, 85, 104, 0.30);

  /* -----------------------------------------------------------------------
     TYPOGRAPHY — Clash Display / Manrope / JetBrains Mono
     Perfect Fourth scale (1.333)
     ----------------------------------------------------------------------- */

  --font-display:  'Clash Display', 'Inter', sans-serif;
  --font-body:     'Manrope', 'Inter', sans-serif;
  --font-mono:     'JetBrains Mono', 'Fira Code', monospace;

  /* Weights */
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;

  /* Scale — Perfect Fourth (1.333) */
  --text-xs:    0.75rem;     /* 12px */
  --text-sm:    0.875rem;    /* 14px */
  --text-base:  1rem;        /* 16px */
  --text-lg:    1.333rem;    /* ~21px */
  --text-xl:    1.777rem;    /* ~28px */
  --text-2xl:   2.369rem;    /* ~38px */
  --text-3xl:   3.157rem;    /* ~50px */
  --text-4xl:   4.209rem;    /* ~67px */

  /* Line heights */
  --leading-tight:    1.1;
  --leading-snug:     1.25;
  --leading-normal:   1.6;
  --leading-relaxed:  1.75;

  /* Letter spacing */
  --tracking-tight:   -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.05em;
  --tracking-wider:   0.1em;
  --tracking-widest:  0.2em;

  /* -----------------------------------------------------------------------
     SPACING
     ----------------------------------------------------------------------- */

  --space-1:   0.25rem;    /* 4px */
  --space-2:   0.5rem;     /* 8px */
  --space-3:   0.75rem;    /* 12px */
  --space-4:   1rem;       /* 16px */
  --space-5:   1.25rem;    /* 20px */
  --space-6:   1.5rem;     /* 24px */
  --space-8:   2rem;       /* 32px */
  --space-10:  2.5rem;     /* 40px */
  --space-12:  3rem;       /* 48px */
  --space-16:  4rem;       /* 64px */
  --space-20:  5rem;       /* 80px */
  --space-24:  6rem;       /* 96px */

  /* -----------------------------------------------------------------------
     LAYOUT
     ----------------------------------------------------------------------- */

  --container-max:    1200px;
  --container-pad:    clamp(1.5rem, 5vw, 4rem);
  --section-pad-y:    clamp(5rem, 12vh, 10rem);
  --grid-gap:         var(--space-8);
  --nav-height:       4.5rem;

  /* -----------------------------------------------------------------------
     BORDERS & RADIUS
     ----------------------------------------------------------------------- */

  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-lg:    12px;
  --radius-xl:    16px;
  --radius-full:  9999px;

  --border-subtle:  1px solid var(--color-surface-border);

  /* -----------------------------------------------------------------------
     SHADOWS & GLOWS
     ----------------------------------------------------------------------- */

  --shadow-card:       0 4px 24px rgba(0, 0, 0, 0.30);
  --shadow-card-hover: 0 8px 40px rgba(0, 0, 0, 0.40);
  --glow-volt:         0 0 30px var(--color-volt-glow);
  --glow-volt-intense: 0 0 50px var(--color-volt-glow-intense);

  /* -----------------------------------------------------------------------
     TRANSITIONS
     ----------------------------------------------------------------------- */

  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-fast:    150ms;
  --duration-normal:  300ms;
  --duration-slow:    500ms;
  --duration-reveal:  800ms;

  /* -----------------------------------------------------------------------
     Z-INDEX SCALE
     ----------------------------------------------------------------------- */

  --z-background:   -1;
  --z-base:         0;
  --z-card:         10;
  --z-nav:          100;
  --z-overlay:      200;
  --z-modal:        300;
}