/* ============================================================
   VYH2 — DESIGN TOKEN SYSTEM
   VASQUEZ & H INGENIEROS CONTRATISTAS S.A.C.
   ============================================================ */

:root {
  /* ── COLOR PALETTE ── */
  --color-bg-base:       #060D1A;
  --color-bg-elevated:   #0A1628;
  --color-bg-surface:    #0F1E38;
  --color-bg-card:       #132040;

  --color-primary:       #1B3A6B;
  --color-primary-light: #2557A7;
  --color-primary-dark:  #0D2044;

  --color-accent:        #F5A623;
  --color-accent-light:  #FFB84D;
  --color-accent-dark:   #C47D0A;

  --color-tech:          #2B9ED4;
  --color-tech-light:    #3DBEF5;
  --color-tech-dark:     #1A7AAB;

  --color-text-primary:  #ffffff;
  --color-text-secondary:#A8B8D8;
  --color-text-muted:    #617090;
  --color-text-inverse:  #060D1A;

  --color-border:        rgba(43, 158, 212, 0.15);
  --color-border-accent: rgba(245, 166, 35, 0.3);
  --color-glass:         rgba(11, 23, 48, 0.65);
  --color-glass-light:   rgba(27, 58, 107, 0.25);

  --color-success:       #22C55E;
  --color-error:         #EF4444;
  --color-warning:       #F59E0B;

  /* ── GRADIENTS ── */
  --grad-primary:        linear-gradient(135deg, #0A1628 0%, #1B3A6B 100%);
  --grad-accent:         linear-gradient(135deg, #F5A623 0%, #2B9ED4 100%);
  --grad-hero:           linear-gradient(160deg, #060D1A 0%, #0D2044 50%, #060D1A 100%);
  --grad-card:           linear-gradient(145deg, rgba(19,32,64,0.9) 0%, rgba(10,22,40,0.95) 100%);
  --grad-glow-accent:    radial-gradient(ellipse at 50% 0%, rgba(245,166,35,0.12) 0%, transparent 70%);
  --grad-glow-tech:      radial-gradient(ellipse at 50% 0%, rgba(43,158,212,0.1) 0%, transparent 70%);

  /* ── TYPOGRAPHY ── */
  --font-display:        'Rajdhani', 'Exo 2', 'Segoe UI', system-ui, sans-serif;
  --font-body:           'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono:           'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

  --text-xs:    0.75rem;
  --text-sm:    0.875rem;
  --text-base:  1rem;
  --text-lg:    1.125rem;
  --text-xl:    1.25rem;
  --text-2xl:   1.5rem;
  --text-3xl:   1.875rem;
  --text-4xl:   2.25rem;
  --text-5xl:   3rem;
  --text-6xl:   3.75rem;
  --text-7xl:   4.5rem;

  --font-normal:   400;
  --font-medium:   500;
  --font-semibold: 600;
  --font-bold:     700;
  --font-extrabold:800;

  --leading-tight:  1.2;
  --leading-snug:   1.35;
  --leading-normal: 1.5;
  --leading-relaxed:1.65;

  --tracking-tight:  -0.025em;
  --tracking-normal:  0em;
  --tracking-wide:    0.05em;
  --tracking-wider:   0.1em;
  --tracking-widest:  0.2em;

  /* ── SPACING ── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* ── LAYOUT ── */
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1280px;
  --container-2xl: 1440px;

  --header-h:        72px;
  --topbar-h:        40px;
  --header-total:    112px;

  /* ── BORDERS ── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* ── SHADOWS ── */
  --shadow-sm:   0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md:   0 4px 16px rgba(0,0,0,0.5), 0 2px 4px rgba(0,0,0,0.3);
  --shadow-lg:   0 10px 40px rgba(0,0,0,0.6), 0 4px 8px rgba(0,0,0,0.4);
  --shadow-xl:   0 20px 60px rgba(0,0,0,0.7);
  --shadow-accent: 0 0 30px rgba(245,166,35,0.2), 0 4px 16px rgba(0,0,0,0.5);
  --shadow-tech:   0 0 30px rgba(43,158,212,0.2), 0 4px 16px rgba(0,0,0,0.5);
  --shadow-glow-accent: 0 0 60px rgba(245,166,35,0.15);
  --shadow-glow-tech:   0 0 60px rgba(43,158,212,0.15);

  /* ── TRANSITIONS ── */
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-expo:   cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out:    cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce:    cubic-bezier(0.34, 1.56, 0.64, 1);

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

  --transition-base: all var(--duration-normal) var(--ease-in-out);
  --transition-fast: all var(--duration-fast) var(--ease-in-out);

  /* ── Z-INDEX ── */
  --z-base:    1;
  --z-above:   10;
  --z-modal:   100;
  --z-header:  200;
  --z-toast:   300;
  --z-tooltip: 400;
}