/**
 * SSR global design tokens (Bangul design system), used via var(--ssr-*).
 * Source values: bangul-vue/static/DESIGN.md.
 */

/* Self-hosted Lato - no external font request. */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../../fonts/lato-v17-latin-regular.woff2) format('woff2'),
    url(../../fonts/lato-v17-latin-regular.woff) format('woff');
}

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../../fonts/lato-v17-latin-700.woff2) format('woff2'),
    url(../../fonts/lato-v17-latin-700.woff) format('woff');
}

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(../../fonts/lato-v17-latin-900.woff2) format('woff2'),
    url(../../fonts/lato-v17-latin-900.woff) format('woff');
}

:root {
  /* Brand */
  --ssr-color-primary: #1baa56;
  --ssr-color-primary-hover: #6ecf91;
  --ssr-color-primary-active: #008742;

  /* Neutral scale */
  --ssr-color-neutral-900: #303030;
  --ssr-color-neutral-800: #404040;
  --ssr-color-neutral-700: #535353;
  --ssr-color-neutral-600: #757575;
  --ssr-color-neutral-500: #949494;
  --ssr-color-neutral-400: #bbb;
  --ssr-color-neutral-300: #dadada;
  --ssr-color-neutral-200: #e8e8e8;
  --ssr-color-neutral-100: #f6f6f6;
  --ssr-color-neutral-50: #fafafa;
  --ssr-color-white: #fff;

  /* Semantic */
  --ssr-color-danger: #da3438;
  --ssr-color-overlay: rgba(0, 0, 0, .8);
  --ssr-color-star: #ffb400;
  --ssr-color-link: #50ac7d;

  /* Radius */
  --ssr-radius-sm: 2px;
  --ssr-radius-md: 4px;
  --ssr-radius-lg: 8px;
  --ssr-radius-xl: 16px;
  --ssr-radius-full: 9999px;

  /* Spacing (8px grid) */
  --ssr-space-xxs: 4px;
  --ssr-space-xs: 8px;
  --ssr-space-sm: 12px;
  --ssr-space-md: 16px;
  --ssr-space-lg: 20px;
  --ssr-space-xl: 24px;
  --ssr-space-xxl: 32px;

  /* Elevation */
  --ssr-shadow-sm: 0 1px 4px rgba(0, 0, 0, .08), 0 -1px 4px rgba(0, 0, 0, .02);
  --ssr-shadow-md: 0 4px 8px rgba(0, 0, 0, .08), 0 -1px 4px rgba(0, 0, 0, .04);

  /* Layout */
  --ssr-container-max: 1176px;

  /* Typography */
  --ssr-font-family: 'Lato', -apple-system, blinkmacsystemfont, sans-serif;
}

/* Base reset (shared by all SSR pages) */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--ssr-font-family);
  line-height: 1.5;
  color: var(--ssr-color-neutral-800);
  background: var(--ssr-color-white);
}

/* Shared layout + UI primitives (reusable across every SSR page) */
.ssr-container {
  width: auto;
  margin: 0 auto;
  padding: 0 var(--ssr-space-md);
}

@media (min-width: 1024px) {
  .ssr-container {
    max-width: 960px;
  }
}

@media (min-width: 1216px) {
  .ssr-container {
    max-width: 1152px;
  }
}

@media (min-width: 1408px) {
  .ssr-container {
    max-width: 1344px;
  }
}

/* Bangul skeleton (shimmer placeholder); mark the region aria-busy="true". */
.ssr-skeleton {
  display: block;
  background: linear-gradient(
    to right,
    var(--ssr-color-neutral-100) 0%,
    var(--ssr-color-neutral-200) 25%,
    var(--ssr-color-neutral-100) 35%
  );
  background-size: 1000px 100%;
  border-radius: var(--ssr-radius-md);
  animation: ssr-shimmer 2s infinite linear;
}

@keyframes ssr-shimmer {
  0% {
    background-position: -1000px 0;
  }

  100% {
    background-position: 1000px 0;
  }
}

.ssr-button {
  padding: 10px 16px;
  font: 700 14px/20px var(--ssr-font-family);
  color: var(--ssr-color-white);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  background: var(--ssr-color-primary);
  border: 0;
  border-radius: var(--ssr-radius-md);
}

.ssr-button:hover {
  color: var(--ssr-color-white);
  background: var(--ssr-color-primary-hover);
}

.ssr-button--block {
  display: block;
  width: 100%;
}

/* Bangul sprite icon (fed by components/icon/icon.js) */
.ssr-icon {
  display: inline-block;
  flex-shrink: 0;
  vertical-align: middle;
  fill: currentColor;
}