/* ═══════════════════════════════════════════════════════════ */
/*  stylesheet.css – Structural framework                    */
/*  Uses variables from globals.css (Single Source of Truth)  */
/*  Generated by website-prototype-generator                 */
/* ═══════════════════════════════════════════════════════════ */

@import "tailwindcss";

/* ── Tailwind v4 Theme ───────────────────────────────── */

@theme {
  /* Colors */
  --color-primary: var(--color-primary);
  --color-secondary: var(--color-secondary);
  --color-accent: var(--color-accent);
  --color-neutral: var(--color-neutral);
  --color-background: var(--color-background);
  --color-foreground: var(--color-foreground);
  --color-muted: var(--color-muted);
  --color-muted-foreground: var(--color-muted-foreground);
  --color-border: var(--color-border);
  --color-success: var(--color-success);
  --color-warning: var(--color-warning);
  --color-error: var(--color-error);

  /* Fonts */
  --font-heading: var(--font-heading);
  --font-body: var(--font-body);

  /* Typography Scale */
  --text-xs: var(--text-xs);
  --text-xs--line-height: var(--text-xs-line-height);
  --text-sm: var(--text-sm);
  --text-sm--line-height: var(--text-sm-line-height);
  --text-base: var(--text-base);
  --text-base--line-height: var(--text-base-line-height);
  --text-lg: var(--text-lg);
  --text-lg--line-height: var(--text-lg-line-height);
  --text-xl: var(--text-xl);
  --text-xl--line-height: var(--text-xl-line-height);
  --text-2xl: var(--text-2xl);
  --text-2xl--line-height: var(--text-2xl-line-height);
  --text-3xl: var(--text-3xl);
  --text-3xl--line-height: var(--text-3xl-line-height);
  --text-4xl: var(--text-4xl);
  --text-4xl--line-height: var(--text-4xl-line-height);
  --text-5xl: var(--text-5xl);
  --text-5xl--line-height: var(--text-5xl-line-height);
  --text-6xl: var(--text-6xl);
  --text-6xl--line-height: var(--text-6xl-line-height);

  /* Spacing */
  --spacing-container: var(--spacing-container);
  --spacing-container-padding: var(--spacing-container-padding);
}

/* ── Base Layer ────────────────────────────────────── */

@layer base {

  *,
  *::before,
  *::after {
    box-sizing: border-box;
    border-color: var(--color-border);
  }

  html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  body {
    font-family: var(--font-body);
    font-weight: var(--font-body-weight);
    color: var(--color-foreground);
    background-color: var(--color-background);
    line-height: var(--text-base-line-height);
    font-size: var(--text-base);
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: var(--font-heading);
    font-weight: var(--font-heading-weight);
    color: var(--color-primary);
    line-height: 1.2;
    margin-bottom: 0.5em;
    /* reasonable default */
  }

  h1 {
    font-size: var(--text-4xl);
    letter-spacing: -0.025em;
  }

  h2 {
    font-size: var(--text-3xl);
    letter-spacing: -0.02em;
  }

  h3 {
    font-size: var(--text-2xl);
    letter-spacing: -0.015em;
  }

  h4 {
    font-size: var(--text-xl);
    letter-spacing: -0.01em;
  }

  h5 {
    font-size: var(--text-lg);
  }

  h6 {
    font-size: var(--text-base);
  }

  p {
    margin-bottom: 1em;
    max-width: 65ch;
    /* readability */
  }

  a {
    color: inherit;
    text-decoration: none;
    transition: opacity 0.2s;
  }

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

/* ── Focus ───────────────────────────────────────── */

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ── Selection ──────────────────────────────────── */

::selection {
  background-color: var(--color-primary);
  color: var(--color-background);
}