/* ================================================================
   Contentious Design System — Base
   @font-face declarations and element defaults.
   Colour tokens live in tokens.css. Semantic mapping in themes/*.css.
   ================================================================ */

/* ── Self-hosted Bely fonts ── */

@font-face {
  font-family: 'bely';
  src: url('../../fonts/Bely-Regular.woff2') format('woff2'),
       url('../../fonts/Bely-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'bely';
  src: url('../../fonts/Bely-Bold.woff2') format('woff2'),
       url('../../fonts/Bely-Bold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'bely';
  src: url('../../fonts/Bely-Italic.woff2') format('woff2'),
       url('../../fonts/Bely-Italic.woff') format('woff');
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'bely-display';
  src: url('../../fonts/BelyDisplay-Regular.woff2') format('woff2'),
       url('../../fonts/BelyDisplay-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ── CSS reset and element defaults ── */

@layer base {
  /* Modern CSS reset — replaces Tailwind Preflight */
  *, ::before, ::after {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: var(--border, currentColor);
  }

  html {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
  }

  body {
    margin: 0;
    line-height: inherit;
    background-color: var(--background);
    color: var(--foreground);
    font-family: 'bely', serif;
    font-size: 1.1rem;
  }

  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
    margin: 0;
    font-family: 'bely-display', serif;
    font-weight: 400;
  }

  p, blockquote, figure, pre { margin: 0; }

  dl, dd { margin: 0; }

  ul, ol { list-style: none; margin: 0; padding: 0; }

  a { color: inherit; text-decoration: inherit; }

  b, strong { font-weight: bolder; }

  img, svg, video, canvas, audio, iframe, embed, object {
    display: block;
    vertical-align: middle;
  }

  img, video {
    max-width: 100%;
    height: auto;
  }

  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }

  button, input, optgroup, select, textarea {
    font-family: inherit;
    font-size: 100%;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
    margin: 0;
    padding: 0;
  }

  button, select { text-transform: none; }

  button, [type='button'], [type='reset'], [type='submit'] {
    -webkit-appearance: button;
    background-color: transparent;
    background-image: none;
  }

  ::-moz-focus-inner { border-style: none; padding: 0; }
  :-moz-focusring { outline: auto; }
  :-moz-ui-invalid { box-shadow: none; }

  summary { display: list-item; }

  abbr[title] {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }

  [hidden] { display: none; }
}

/* ── Animations ── */

/* Hero section entrance */
@keyframes hero-drop {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes hero-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Accordion open/close — Radix provides --radix-accordion-content-height */
@keyframes accordion-down {
  from { height: 0; }
  to   { height: var(--radix-accordion-content-height); }
}

@keyframes accordion-up {
  from { height: var(--radix-accordion-content-height); }
  to   { height: 0; }
}

@keyframes loading-ring-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.loading-ring-spin {
  animation: loading-ring-spin 3s linear infinite;
}

@keyframes rotate-ring {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.rotating-ring {
  animation: rotate-ring 30s ease-in-out infinite;
}

@layer components {
  /* Mobile menu animations */
  .animate-fade-in {
    animation: fadeIn 0.3s ease-out forwards;
  }

  .animate-slide-in-1 {
    animation: slideInFromTop 0.4s ease-out 0.1s both;
  }

  .animate-slide-in-2 {
    animation: slideInFromTop 0.4s ease-out 0.2s both;
  }

  .animate-slide-in-3 {
    animation: slideInFromTop 0.4s ease-out 0.3s both;
  }

  .animate-slide-in-4 {
    animation: slideInFromTop 0.4s ease-out 0.4s both;
  }

  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  @keyframes slideInFromTop {
    from {
      opacity: 0;
      transform: translateY(-20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Mobile popover scrolling */
  @media (max-width: 767px) {
    .popover-mobile {
      max-height: 70vh;
      overflow-y: auto;
    }
  }
}