/* Generated from the theme (SPEC.md §62). Change tokens, not this file. */
@layer assemora {
  :root {
    --space-none: 0;
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 2rem;
    --space-lg: 4rem;
    --space-xl: 7rem;
    --space-2xl: 10rem;
    --width-narrow: 32rem;
    --width-normal: 46rem;
    --width-wide: 72rem;
    --width-full: 100%;
    --radius-none: 0;
    --radius-sm: 0.375rem;
    --radius-md: 0.875rem;
    --radius-lg: 1.25rem;
    --radius-full: 9999px;
    --brand: #2f3ba8;
    --brand-soft: #e4e7fb;
    --ink: #12141c;
    --ink-soft: #5a6076;
    --line: #dcdfe9;
    --surface: #fbfbfd;
    --surface-sunken: #eef0f7;
    --font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-heading: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono: ui-monospace, "SFMono-Regular", "Menlo", monospace;
    --text-2xl: 2.5rem;
    --text-3xl: 3.5rem;
    --text-lg: 1.25rem;
    --text-md: 1rem;
    --text-sm: 0.9375rem;
    --text-xl: 1.75rem;
    --text-xs: 0.8125rem;
    --weight-bold: 700;
    --weight-medium: 500;
    --weight-normal: 400;
    --weight-semibold: 600;
    --leading-loose: 1.8;
    --leading-normal: 1.55;
    --leading-tight: 1.15;
  }

  /* 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;
  }
}