/* lexvd.nl — one static page.
   Palette from the TechiesReviews brand (Voldemort purple, Imperial Red, Dr. White).
   Helpers first, then one bounded @scope per component. */

@layer tokens, base, utilities, components;

@layer tokens {
  :root {
    color-scheme: light dark;

    --color-snow: #FAFAFA;
    --color-mist: #DFDFE5;
    --color-ink: #17121F;
    --color-purple: #2D135F;
    --color-purple-light: oklch(from var(--color-purple) 82% 0.06 h);
    --color-red: #EC2938;
    --color-orange: #F28C28;

    --semantic-bg: light-dark(var(--color-snow), var(--color-ink));
    --semantic-surface: light-dark(
      color-mix(in oklch, var(--color-mist) 45%, var(--color-snow)),
      color-mix(in oklch, var(--color-purple) 35%, var(--color-ink))
    );
    --semantic-text: light-dark(var(--color-ink), var(--color-snow));
    --semantic-muted: light-dark(
      color-mix(in oklch, var(--color-ink) 65%, var(--color-snow)),
      color-mix(in oklch, var(--color-snow) 70%, var(--color-ink))
    );
    --semantic-accent: light-dark(var(--color-purple), var(--color-purple-light));
    --semantic-highlight: var(--color-red);
    --semantic-shadow: light-dark(
      color-mix(in oklch, var(--color-purple) 12%, transparent),
      color-mix(in oklch, var(--color-ink) 80%, transparent)
    );
    --semantic-gradient: linear-gradient(120deg, var(--color-orange), var(--color-red) 55%, var(--color-purple-light));

    --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-mono: ui-monospace, "Roboto Mono", "SF Mono", Menlo, Consolas, monospace;

    --text-small: 0.875rem;
    --text-body: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
    --text-lead: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
    --text-h3: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
    --text-display: clamp(2.5rem, 1.4rem + 4.6vw, 5.5rem);

    --space-s: 0.75rem;
    --space-m: 1.5rem;
    --space-l: 3rem;
    --space-xl: clamp(4rem, 3rem + 5vw, 8rem);

    --radius-m: 1rem;
    --radius-l: 1.75rem;
    --max-width: 72rem;
  }
}

@layer base {
  *, *::before, *::after { box-sizing: border-box; }

  html { scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

  body {
    margin: 0;
    background: var(--semantic-bg);
    color: var(--semantic-text);
    font: 400 var(--text-body) / 1.6 var(--font-sans);
    -webkit-font-smoothing: antialiased;
  }

  h1, h2, h3, p, ul, figure { margin: 0; }
  ul { padding: 0; list-style: none; }
  img { display: block; max-width: 100%; }

  a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
  a:hover { color: var(--semantic-highlight); }
  :focus-visible { outline: 2px solid var(--semantic-highlight); outline-offset: 3px; border-radius: 0.25rem; }

  .skip-link { position: absolute; left: var(--space-s); top: -4rem; padding: var(--space-s); background: var(--semantic-surface); }
  .skip-link:focus { top: var(--space-s); }
}

@layer utilities {
  .section { padding-block: var(--space-xl); }

  .container {
    display: flex;
    flex-direction: column;
    gap: var(--space-l);
    width: 100%;
    max-width: var(--max-width);
    margin-inline: auto;
    padding-inline: var(--space-m);
  }

  .layout-flex { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-m); }

  .layout-grid {
    --_columns: 1;
    display: grid;
    grid-template-columns: repeat(var(--_columns), minmax(0, 1fr));
    gap: var(--space-m);
  }

  .eyebrow {
    font: 500 var(--text-small) / 1.4 var(--font-mono);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--semantic-muted);
  }

  .heading-style-display {
    font-size: var(--text-display);
    font-weight: 600;
    line-height: 1.02;
    letter-spacing: -0.035em;
    text-wrap: balance;
  }

  .heading-style-h3 { font-size: var(--text-h3); font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; }

  .lead { font-size: var(--text-lead); line-height: 1.5; text-wrap: pretty; }

  .image { width: 100%; height: auto; object-fit: cover; aspect-ratio: 1 / 1; }

  .button {
    display: inline-flex;
    padding: 0.75rem 1.25rem;
    border-radius: 999px;
    background: var(--semantic-surface);
    box-shadow: 0 1px 2px var(--semantic-shadow), 0 6px 20px var(--semantic-shadow);
    font-weight: 500;
    text-decoration: none;
    transition: transform 160ms ease-out, color 160ms ease-out;
  }
  .button:hover { transform: translateY(-2px); }
  .button:active { transform: translateY(0) scale(0.98); }
  @media (prefers-reduced-motion: reduce) { .button { transition: color 160ms ease-out; } .button:hover { transform: none; } }
}

@layer components {
  @scope (.header_component) to ([class*="_component"]) {
    :scope { padding-block: var(--space-m); }
    .container { flex-direction: row; justify-content: space-between; }
    .wordmark { font: 600 1.125rem / 1 var(--font-mono); text-decoration: none; }
    .wordmark::after { content: "."; color: var(--semantic-highlight); }
    nav a { font-size: var(--text-small); text-decoration: none; color: var(--semantic-muted); }
    nav a:hover { color: var(--semantic-text); }
  }

  @scope (.hero_component) to ([class*="_component"]) {
    :scope { padding-block-start: var(--space-l); }
    .heading-style-display { max-width: 16ch; }
    .layout-grid { gap: var(--space-l); align-items: end; }
    .content { display: flex; flex-direction: column; gap: var(--space-m); max-width: 38rem; color: var(--semantic-muted); }
    .lead { color: var(--semantic-text); }
    .portrait { max-width: 18rem; justify-self: start; }

    @media (width > 50rem) {
      .layout-grid { --_columns: 3; }
      .content { grid-column: span 2; }
      .portrait { justify-self: end; width: 100%; }
    }
  }

  @scope (.now_component) to ([class*="_component"]) {
    .layout-grid { gap: var(--space-m); }
    @media (width > 50rem) { .layout-grid { --_columns: 2; } }
  }

  @scope (.card_component) to ([class*="_component"]) {
    :scope {
      display: flex;
      flex-direction: column;
      gap: var(--space-s);
      padding: var(--space-m);
      border-radius: var(--radius-l);
      background: var(--semantic-surface);
      box-shadow: 0 1px 2px var(--semantic-shadow);
    }
    .heading-style-h3 a { text-decoration: none; }
    .heading-style-h3 a::after { content: " ↗"; color: var(--semantic-highlight); font-weight: 400; }
    p { color: var(--semantic-muted); }
    .meta { margin-top: auto; padding-top: var(--space-s); font: 400 var(--text-small) / 1.4 var(--font-mono); color: var(--semantic-accent); }
  }

  @scope (.made_component) to ([class*="_component"]) {
    .container { gap: var(--space-m); }
    .intro { max-width: 38rem; color: var(--semantic-muted); }
    .list { margin-top: var(--space-m); }

    .row {
      display: grid;
      grid-template-columns: 1fr;
      gap: 0.25rem;
      padding-block: var(--space-m);
      border-top: 1px solid color-mix(in oklch, var(--semantic-text) 12%, transparent);
    }
    .row:last-child { border-bottom: 1px solid color-mix(in oklch, var(--semantic-text) 12%, transparent); }

    .name { font-size: var(--text-h3); font-weight: 600; letter-spacing: -0.01em; }
    .name a { text-decoration: none; }
    .name a::after { content: " ↗"; color: var(--semantic-highlight); font-weight: 400; }
    .description { color: var(--semantic-muted); max-width: 42rem; }
    .status { font: 400 var(--text-small) / 1.4 var(--font-mono); color: var(--semantic-accent); }

    @media (width > 50rem) {
      .row { grid-template-columns: 16rem 1fr 8rem; gap: var(--space-m); align-items: baseline; }
      .status { text-align: end; }
    }
  }

  @scope (.contact_component) to ([class*="_component"]) {
    :scope { padding-block-end: var(--space-l); }
    .container { gap: var(--space-m); }
    .heading-style-display {
      background: var(--semantic-gradient);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      padding-block-end: 0.1em;
    }
    .lead { max-width: 36rem; color: var(--semantic-muted); }
    .layout-flex { gap: var(--space-s); margin-top: var(--space-s); }
  }

  @scope (.footer_component) to ([class*="_component"]) {
    :scope { padding-block: var(--space-l); font-size: var(--text-small); color: var(--semantic-muted); }
    .container { flex-direction: row; justify-content: space-between; }
  }
}