@font-face {
  font-family: 'Syne';
  src: url('../fonts/Syne-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Syne';
  src: url('../fonts/Syne-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Syne';
  src: url('../fonts/Syne-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Syne';
  src: url('../fonts/Syne-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'DM Sans';
  src: url('../fonts/DMSans-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'DM Sans';
  src: url('../fonts/DMSans-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'DM Sans';
  src: url('../fonts/DMSans-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'DM Mono';
  src: url('../fonts/DMMono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'DM Mono';
  src: url('../fonts/DMMono-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  --pub-bg:          #0a0b0d;
  --pub-surface:     #111317;
  --pub-surface-2:   #171b22;
  --pub-border:      #1f242c;
  --pub-text:        #f3f4f6;
  --pub-text-2:      #8a93a6;
  --pub-text-3:      #5c6578;
  --pub-primary:     #3581EF;
  --pub-accent:      #1BB5B1;
  --pub-gradient:    linear-gradient(135deg, #3581EF 0%, #1BB5B1 100%);
  --pub-glow:        radial-gradient(ellipse 90% 60% at 15% -20%, rgba(53,129,239,0.28), transparent 55%),
                     radial-gradient(ellipse 70% 50% at 95% 10%, rgba(27,181,177,0.18), transparent 50%);
  --pub-font-head:   'Syne', sans-serif;
  --pub-font-body:   'DM Sans', sans-serif;
  --pub-font-mono:   'DM Mono', monospace;
  --pub-radius:      12px;
  --pub-shadow:      0 20px 40px rgba(0,0,0,0.4);
  --pub-ease:        cubic-bezier(0.16, 1, 0.3, 1);
}
