/* ==========================================================================
   VARIABLES.CSS — Design Tokens
   Option 3: Modern Tech / Neo-Corporate Dark Theme
   SRS Management Website
   ========================================================================== */

:root {
  /* ---- Colors ---- */
  --color-bg:            #0D1117;
  --color-surface:       #161B22;
  --color-card:          #1C2128;
  --color-text:          #E6EDF3;
  --color-muted:         #7D8590;
  --color-accent:        #00D4FF;
  --color-accent-dark:   #0099B8;
  --color-border:        #30363D;
  --color-border-hover:  rgba(0, 212, 255, 0.3);
  --color-glow:          rgba(0, 212, 255, 0.15);

  /* Semantic */
  --color-success:       #3FB950;
  --color-warning:       #D29922;
  --color-error:         #F85149;

  /* Footer */
  --color-footer-bg:     #0A0E13;

  /* ---- Typography ---- */
  --font-display:  'Space Grotesk', sans-serif;
  --font-body:     'Inter', sans-serif;
  --font-mono:     'JetBrains Mono', monospace;

  /* Type scale */
  --text-hero:     clamp(4rem, 9vw, 8rem);
  --text-h1:       clamp(2.5rem, 5vw, 4.5rem);
  --text-h2:       clamp(2rem, 4vw, 3rem);
  --text-h3:       clamp(1.1rem, 1.5vw, 1.35rem);
  --text-body:     0.9375rem;    /* 15px */
  --text-small:    0.8125rem;    /* 13px */
  --text-caption:  0.6875rem;    /* 11px */

  /* Line heights */
  --leading-tight:   1.1;
  --leading-snug:    1.3;
  --leading-normal:  1.5;
  --leading-relaxed: 1.7;

  /* Letter spacing */
  --tracking-tight:  -0.03em;
  --tracking-normal:  0;
  --tracking-wide:    0.2em;

  /* ---- Spacing ---- */
  --space-xs:   8px;
  --space-sm:   16px;
  --space-md:   24px;
  --space-lg:   40px;
  --space-xl:   64px;
  --space-2xl:  100px;
  --space-3xl:  160px;

  /* ---- Layout ---- */
  --nav-height:     72px;
  --container-max:  1200px;

  /* ---- Border Radius ---- */
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  16px;

  /* ---- Transitions ---- */
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast:   150ms;
  --duration-base:   300ms;
  --duration-slow:   500ms;

  /* ---- Shadows ---- */
  --shadow-card:     0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-card-hover: 0 4px 24px rgba(0, 0, 0, 0.4), 0 0 40px var(--color-glow);
  --shadow-glow:     0 0 20px var(--color-glow);
  --shadow-glow-lg:  0 0 60px rgba(0, 212, 255, 0.15), 0 0 120px rgba(0, 212, 255, 0.05);
  --shadow-input-focus: 0 0 0 3px rgba(0, 212, 255, 0.12);

  /* ---- Glassmorphism ---- */
  --color-glass:        rgba(13, 17, 23, 0.6);
  --color-glass-border: rgba(255, 255, 255, 0.06);

  /* ---- Z-index scale ---- */
  --z-base:       1;
  --z-sticky:     100;
  --z-nav:        500;
  --z-overlay:    900;
  --z-modal:      1000;
  --z-preloader:  9999;
}