@import "tailwindcss";

@theme inline {
  --color-bg: #FAF8F6;
  --color-fg: #1A1614;
  --color-ember: #e8420e;
  --color-flame: #ff4d1a;
  --color-muted: #F3F0EC;
  --color-muted-fg: #9B9590;
  --color-border: #D8D4CE;
  --color-card: #ffffff;
  --font-display: "Bebas Neue", system-ui;
  --font-body: "Syne", system-ui;
  --font-mono: "Space Mono", monospace;
}

@layer base {
  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  html {
    scroll-behavior: smooth;
  }

  body {
    background: var(--color-bg);
    color: var(--color-fg);
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  ::selection {
    background: var(--color-ember);
    color: white;
  }
}

@layer components {
  .section-container {
    max-width: 1120px;
    margin: 0 auto;
    padding: 5rem 1.5rem;
  }

  @media (max-width: 640px) {
    .section-container {
      padding: 3rem 1rem;
    }
  }

  .ember-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 2rem;
    min-height: 44px;
    background: var(--color-ember);
    color: white;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
  }

  .ember-button:hover {
    background: var(--color-flame);
    transform: translateY(-1px);
  }

  .ember-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
  }
}

@keyframes marquee-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}