@layer base {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body {
    margin: 0;
    background: var(--ui-background);
    color: var(--ui-label);
    font-family: var(--font-system);
    font-size: var(--text-body);
    line-height: 1.55;
    overflow-wrap: anywhere;
  }
  img { display: block; max-inline-size: 100%; block-size: auto; }
  button, input, select, textarea { font: inherit; color: inherit; }
  button, a { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
  button { cursor: pointer; }
  a { color: var(--ui-accent); text-underline-offset: 0.2em; text-decoration-thickness: 0.08em; }
  :focus-visible { outline: 3px solid var(--ui-focus); outline-offset: 4px; }
  :target { scroll-margin-block: var(--space-8); }
  ::selection { color: var(--ui-on-accent); background: var(--ui-accent); }
  [hidden] { display: none !important; }
  .skip-link {
    position: fixed;
    z-index: 10;
    inset-block-start: max(var(--space-3), env(safe-area-inset-top, 0px));
    inset-inline-start: max(var(--space-4), env(safe-area-inset-left, 0px));
    max-inline-size: calc(100% - var(--space-8));
    padding: var(--space-3) var(--space-5);
    background: var(--ui-surface-raised);
    color: var(--ui-label);
    border-radius: var(--radius-control);
    transform: translateY(calc(-100% - var(--space-8)));
  }
  .skip-link:focus { transform: translateY(0); }
}

@layer components {
  .ui-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-block-size: var(--target-min);
    min-inline-size: var(--target-min);
    padding: var(--space-2) var(--space-5);
    border: 1px solid transparent;
    border-radius: var(--radius-capsule);
    background: var(--ui-accent);
    color: var(--ui-on-accent);
    font-size: var(--text-callout);
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
    transition: background-color var(--duration-feedback) var(--ease-standard);
  }
  .ui-button--quiet { background: transparent; color: var(--ui-label); }
  .ui-button:disabled { cursor: default; opacity: 0.5; }
  @media (hover: hover) {
    .ui-button--quiet:hover:not(:disabled) { background: var(--ui-control-hover); }
    a:hover { text-decoration-thickness: 0.12em; }
  }
  .ui-button--quiet:active:not(:disabled) { background: var(--ui-control-pressed); }
  .glass-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1);
    inline-size: fit-content;
    max-inline-size: 100%;
    padding: var(--space-2);
    border: 1px solid var(--ui-separator);
    border-radius: var(--radius-sheet);
    background: var(--ui-surface-raised);
    box-shadow: var(--ui-shadow);
  }
  .image-preview__toolbar { background: var(--ui-surface-raised); }
  @media (prefers-reduced-transparency: no-preference) {
    @supports (backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px)) {
      .glass-bar, .image-preview__toolbar {
        background: var(--ui-material);
        -webkit-backdrop-filter: saturate(150%) blur(20px);
        backdrop-filter: saturate(150%) blur(20px);
      }
    }
  }
}

@layer preferences {
  @media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
    .glass-bar, .image-preview__toolbar {
      background: var(--ui-surface-raised);
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
    }
  }
  @media (prefers-contrast: more) {
    :root {
      --ui-secondary-label: var(--ui-label);
      --ui-tertiary-label: var(--ui-label);
      --ui-separator: var(--ui-control-border);
      --ui-shadow: none;
      --ui-modal-shadow: none;
    }
    .ui-button--quiet { border-color: var(--ui-control-border); }
  }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  }
  @media (forced-colors: active) {
    :root {
      --ui-background: Canvas;
      --ui-surface: Canvas;
      --ui-surface-raised: Canvas;
      --ui-label: CanvasText;
      --ui-secondary-label: CanvasText;
      --ui-tertiary-label: CanvasText;
      --ui-accent: LinkText;
      --ui-on-accent: Canvas;
      --ui-separator: ButtonText;
      --ui-control-border: ButtonText;
      --ui-focus: Highlight;
      --ui-shadow: none;
      --ui-modal-shadow: none;
    }
    .glass-bar, .image-preview__toolbar { -webkit-backdrop-filter: none; backdrop-filter: none; }
    .ui-button { border-color: ButtonText; }
  }
}