/* EOS Audio — Design tokens
   Reproduced from the "EOS Audio Design System" Claude Design project.
   Fonts are loaded via Google Fonts in index.html (Bebas Neue + Inter),
   identical to the bundled woff2 in the source system. */

:root {
  --font-display: "Bebas Neue", "Arial Narrow", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;

  /* Weights */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Neutral ramp */
  --color-white: #ffffff;
  --color-neutral-lightest: #f2f2f2;
  --color-neutral-lighter: #d8d8d8;
  --color-neutral-light: #b2b2b2;
  --color-neutral: #7f7f7f;
  --color-neutral-dark: #4c4c4c;
  --color-neutral-darker: #191919;
  --color-neutral-darkest: #000000;

  /* Shark — cool charcoal surfaces */
  --color-shark-lightest: #e8e8e8;
  --color-shark-lighter: #d1d1d1;
  --color-shark-light: #5e6060;
  --color-shark: #191c1d;
  --color-shark-dark: #141617;
  --color-shark-darker: #0a0b0b;
  --color-shark-darkest: #070808;

  /* Twine — accent (overridden per-page to a cool blue-grey on the homepage) */
  --color-twine-lightest: #f9f5ee;
  --color-twine-lighter: #f3ecde;
  --color-twine-light: #d7bd8c;
  --color-twine: #c6a15b;
  --color-twine-dark: #9e8048;
  --color-twine-darker: #4f4024;
  --color-twine-darkest: #3b301b;

  /* White alpha scale */
  --color-white-5: rgba(255, 255, 255, 0.05);
  --color-white-10: rgba(255, 255, 255, 0.1);
  --color-white-15: rgba(255, 255, 255, 0.15);
  --color-white-20: rgba(255, 255, 255, 0.2);
  --color-white-30: rgba(255, 255, 255, 0.3);
  --color-white-40: rgba(255, 255, 255, 0.4);
  --color-white-50: rgba(255, 255, 255, 0.5);
  --color-white-60: rgba(255, 255, 255, 0.6);

  /* Black alpha scale */
  --color-black-5: rgba(0, 0, 0, 0.05);
  --color-black-10: rgba(0, 0, 0, 0.1);
  --color-black-15: rgba(0, 0, 0, 0.15);
  --color-black-20: rgba(0, 0, 0, 0.2);
  --color-black-30: rgba(0, 0, 0, 0.3);
  --color-black-40: rgba(0, 0, 0, 0.4);
  --color-black-50: rgba(0, 0, 0, 0.5);
  --color-black-60: rgba(0, 0, 0, 0.6);

  /* Type scale (desktop) */
  --text-h1: 5.25rem;
  --text-h2: 3.75rem;
  --text-h3: 3rem;
  --text-h4: 2.5rem;
  --text-h5: 2rem;
  --text-h6: 1.625rem;
  --leading-heading: 1.1;
  --tracking-heading: 0.01em;

  --text-large: 1.625rem;
  --text-medium: 1.25rem;
  --text-regular: 1.125rem;
  --text-small: 1rem;
  --text-tiny: 0.75rem;
  --leading-body: 1.6;

  /* Spacing & layout */
  --section-y: clamp(4rem, 6vw, 7rem);
  --section-x: 5%;
  --radius-button: 6.25rem;
  --radius-form: 0.75rem;
  --radius-card-sm: 1.5rem;
  --radius-card-md: 2rem;
  --radius-card-lg: 2.5rem;
  --container-xxl: 80rem; /* 1280px */

  /* Shadows */
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.55);

  /* Motion */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 150ms;
  --duration-base: 200ms;
  --duration-slow: 400ms;

  /* Semantic */
  --gradient-primary: linear-gradient(135deg, var(--color-shark) 20%, var(--color-twine));
}

@media (max-width: 991px) {
  :root {
    --text-h1: 3rem;
    --text-h2: 2.75rem;
    --text-h3: 2rem;
    --text-h4: 1.5rem;
    --text-h5: 1.25rem;
    --text-h6: 1.125rem;
    --text-large: 1.125rem;
    --text-medium: 1rem;
    --text-regular: 0.875rem;
    --text-small: 0.75rem;
    --text-tiny: 0.625rem;
  }
}

/* ---- Base element defaults ---- */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--font-weight-regular);
  font-size: var(--text-regular);
  line-height: var(--leading-body);
  color: #0b0c0d;
  background-color: #ffffff;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--font-weight-regular);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  margin: 0;
}

p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font-family: inherit; }