/* Generated from the theme (SPEC.md §62). Change tokens, not this file. */
@layer assemora {
  :root {
    --space-none: 0;
    --space-xs: 2.5rem;
    --space-sm: 3.5rem;
    --space-md: 4rem;
    --space-lg: 5rem;
    --space-xl: 6rem;
    --space-2xl: 6.5rem;
    --width-narrow: 34rem;
    --width-normal: 46rem;
    --width-wide: 75rem;
    --width-full: 100%;
    --radius-none: 0;
    --radius-sm: 0.625rem;
    --radius-md: 1rem;
    --radius-lg: 1.125rem;
    --radius-full: 999px;
    --accent: #29845a;
    --accent-deep: #1f6a46;
    --amber-text: #8a6a1f;
    --amber-tint: #fbf3dc;
    --brand: #29845a;
    --brand-soft: #e4e7fb;
    --green-tint: #e3f1e9;
    --hairline: #eceef2;
    --ink: #1a1a1a;
    --ink-deep: #111111;
    --ink-mute: #8a8f9c;
    --ink-soft: #5b6070;
    --line: #e2e4ea;
    --line-on-ink: #3a3a3a;
    --mint: #7fd1a4;
    --panel: #ffffff;
    --paper: #f3f4f7;
    --red: #a53b3b;
    --red-tint: #fdf1f1;
    --surface: #ffffff;
    --surface-sunken: #f3f4f7;
    --font-body: "Space Grotesk", "Manrope", system-ui, sans-serif;
    --font-heading: "Space Grotesk", "Manrope", system-ui, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, monospace;
    --text-2xl: 2.75rem;
    --text-3xl: 4.5rem;
    --text-lg: 1.1875rem;
    --text-md: 1.0625rem;
    --text-sm: 0.9375rem;
    --text-xl: 1.5rem;
    --text-xs: 0.75rem;
    --weight-bold: 700;
    --weight-medium: 500;
    --weight-normal: 400;
    --weight-semibold: 600;
    --leading-display: 0.98;
    --leading-loose: 1.8;
    --leading-normal: 1.55;
    --leading-relaxed: 1.65;
    --leading-snug: 1.1;
    --leading-tight: 1.02;
  }

  /* The reset, minimal: a box model, and a body that is not inset. */
  * {
    box-sizing: border-box;
  }

  body {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--text-md);
    line-height: var(--leading-normal);
    color: var(--ink);
    background-color: var(--surface);
  }

  /* The seven universal controls of SPEC.md §61, applied. */
  .assemora-design {
    padding-top: var(--assemora-space-top, 0);
    padding-bottom: var(--assemora-space-bottom, 0);
    background-color: var(--assemora-background, transparent);
    background-image: var(--assemora-background-image, none);
    background-size: cover;
    background-position: center;
  }

  .assemora-design[data-width] > * {
    margin-inline: auto;
  }

  .assemora-design[data-width="narrow"] > * {
    max-width: var(--width-narrow);
  }

  .assemora-design[data-width="normal"] > * {
    max-width: var(--width-normal);
  }

  .assemora-design[data-width="wide"] > * {
    max-width: var(--width-wide);
  }

  /* "full" is the container's own width, and a token like the other three: a keyword
     here would be the one width a theme is not allowed to change. */
  .assemora-design[data-width="full"] > * {
    max-width: var(--width-full);
  }

  .assemora-design[data-align="start"] {
    text-align: left;
  }

  .assemora-design[data-align="center"] {
    text-align: center;
  }

  .assemora-design[data-align="end"] {
    text-align: right;
  }

  .assemora-design[data-container="narrow"] {
    --container: var(--width-narrow);
  }

  .assemora-design[data-container="normal"] {
    --container: var(--width-normal);
  }

  .assemora-design[data-container="wide"] {
    --container: var(--width-wide);
  }

  .assemora-design[data-container="full"] {
    --container: var(--width-full);
  }

  @media (max-width: 640px) {
    .assemora-design[data-hidden-mobile] {
      display: none;
    }
  }

  @media (min-width: 641px) and (max-width: 1024px) {
    .assemora-design[data-hidden-tablet] {
      display: none;
    }
  }

  @media (min-width: 1025px) {
    .assemora-design[data-hidden-desktop] {
      display: none;
    }
  }

  /* An editor sees what it is about to unhide; a visitor never reaches this rule. */
  [data-assemora-hidden="true"] {
    opacity: 0.4;
  }
}