/* ═══════════════════════════════════════════════════════════
   ESB Group — Design Tokens & Shared Base
   Linked by every page for consistent theming.
   ═══════════════════════════════════════════════════════════ */

/* ── RESET ──────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{cursor:pointer;border:none;background:none;font:inherit;color:inherit}
ul,ol{list-style:none}
input,button,select,textarea{font-family:inherit}

/* ── DESIGN TOKENS ──────────────────────────────────────── */
:root{
  /* Typography */
  --font-heading: 'Adamina', serif;
  --font-body: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --text-xs:  12px;
  --text-sm:  14px;
  --text-base:16px;
  --text-md:  17px;
  --text-lg:  19px;
  --text-xl:  21px;

  /* Colors */
  --color-bg:             #000;
  --color-surface:        #0a0a0a;
  --color-elevated:       #141414;
  --color-text:           #f0f0f4;
  --color-text-secondary: rgba(255,255,255,.7);
  --color-text-muted:     rgba(255,255,255,.5);
  --color-text-faint:     rgba(255,255,255,.35);

  /* Borders */
  --border-subtle:  rgba(255,255,255,.06);
  --border-default: rgba(255,255,255,.08);
  --border-medium:  rgba(255,255,255,.12);
  --border-strong:  rgba(255,255,255,.2);
  --border-focus:   rgba(255,255,255,.3);

  /* Accent (subtle red) */
  --accent:        rgb(180,40,50);
  --accent-hover:  rgb(200,50,60);
  --accent-soft:   rgba(180,40,50,.1);
  --accent-border: rgba(180,40,50,.25);
  --accent-glow:   rgba(180,40,50,.06);

  /* Glass */
  --glass-bg:     rgba(18,18,28,.8);
  --glass-blur:   blur(20px);
  --glass-border: rgba(255,255,255,.06);
  --glass-shadow: 0 8px 32px rgba(0,0,0,.4);

  /* Gradients */
  --gradient-bg:          linear-gradient(135deg, #000 0%, #050508 100%);
  --gradient-card:        linear-gradient(135deg, rgba(255,255,255,.02) 0%, rgba(0,0,0,.8) 50%, rgba(255,255,255,.015) 100%);
  --gradient-text-silver: linear-gradient(91deg, rgb(130,130,130) 0%, #fff 52%, rgb(150,150,150) 100%);
  --gradient-text-accent: linear-gradient(91deg, rgb(180,40,50) 0%, rgb(230,90,90) 50%, rgb(60,15,20) 100%);
  --gradient-button:      linear-gradient(89deg, #fff, #b8b8b8);
  --gradient-accent-btn:  linear-gradient(135deg, rgb(160,35,45), rgb(120,25,30));

  /* Spacing */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-2xl: 48px;

  /* Radius */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   20px;
  --radius-pill: 100px;

  /* Transitions */
  --ease-smooth:     cubic-bezier(.4,0,.2,1);
  --ease-bounce:     cubic-bezier(.68,-.55,.265,1.55);
  --transition-fast: .15s cubic-bezier(.4,0,.2,1);
  --transition-base: .25s cubic-bezier(.4,0,.2,1);
  --transition-slow: .4s  cubic-bezier(.4,0,.2,1);
}

/* ── BODY ───────────────────────────────────────────────── */
body{
  font-family: var(--font-body);
  background: #000;
  color: var(--color-text);
  line-height: 1.65;
  font-weight: 400;
  overflow-x: hidden;
}

/* ── SHARED KEYFRAMES ───────────────────────────────────── */
@keyframes fadeInUp{
  from{opacity:0;transform:translateY(20px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes gradientShift{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
@keyframes silverGradient{
  0%{background-position:0% 50%}
  50%{background-position:200% 50%}
  100%{background-position:400% 50%}
}