/* Lantern is an opt-in material, independent of palette and typography.
 * All paint is deterministic CSS. No texture is placed over meaningful content.
 * Opacity-only mixes use sRGB to preserve the source hue. Perceptual blends
 * between two colored paints continue to use OKLCH. */
@layer base {
  [data-hraness-material="lantern"] {
    --hraness-material-module: 6rem;
    --hraness-material-warm: var(--primary, var(--ui-primary, CanvasText));
    --hraness-material-cool: var(--info, var(--ui-info, CanvasText));
    --hraness-material-plane: var(--surface, var(--ui-background, Canvas));
    --hraness-material-ink: var(--foreground, var(--ui-foreground, CanvasText));
    --hraness-material-muted: var(--muted, var(--ui-muted-foreground, CanvasText));
    --hraness-material-seam: color-mix(in oklch, var(--hraness-material-ink) 5%, var(--hraness-material-plane));
    --hraness-material-outline: transparent;
    --hraness-material-edge: rgb(255 255 255 / 0.14);
    --hraness-material-shade: rgb(0 0 0 / 0.14);
    --hraness-material-warm-plane: color-mix(in oklch, var(--hraness-material-warm) 12%, var(--hraness-material-plane));
    --hraness-material-rest: inset 0 1px 0 var(--hraness-material-edge), 0 2px 5px rgb(0 0 0 / 0.05), 0 10px 28px -14px rgb(0 0 0 / 0.14);
    --hraness-material-raised: inset 0 1px 0 var(--hraness-material-edge), 0 1px 3px rgb(0 0 0 / 0.08);
    --hraness-material-inset: inset 2px 3px 7px rgb(0 0 0 / 0.08), inset -1px -1px 2px rgb(255 255 255 / 0.1);
    --hraness-material-lift: inset 0 1px 0 var(--hraness-material-edge), -3px -3px 10px rgb(255 255 255 / 0.04), 2px 4px 8px rgb(0 0 0 / 0.07), 8px 18px 40px rgb(0 0 0 / 0.09);
    --hraness-material-focus: var(--focus, var(--ui-ring, Highlight));
    --hraness-material-duration: 160ms;
  }
}

@layer components.hraness-design-kit.legacy {
  /* Patterns are retired. The attribute values stay valid for compatibility,
     and every one paints the uninterrupted palette background. */
  :is([data-hraness-pattern="cells"], [data-hraness-pattern="weave"], [data-hraness-pattern="contour"], [data-hraness-pattern="mesh"], [data-hraness-pattern="none"]) {
    --hraness-pattern-image: none;
    --hraness-pattern-decoration: none;
    --hraness-marketing-field-images: none;
    --hraness-material-wall-images: none;
  }

  /* A quiet, opaque reading plane. The seam belongs to the surface perimeter. */
  :where([data-hraness-material="lantern"], [data-hraness-material="lantern"] *):is(.hraness-material-pane) {
    background-color: var(--hraness-material-plane);
    box-shadow: var(--hraness-material-rest);
    border: 1px solid var(--hraness-material-outline);
    border-radius: var(--radius-lg, 0.75rem);
    color: var(--hraness-material-ink);
    min-inline-size: 0;
  }
  :where([data-hraness-material="lantern"], [data-hraness-material="lantern"] *):is(.hraness-material-pane[data-depth="raised"]) {
    box-shadow: var(--hraness-material-lift);
  }
  :where([data-hraness-material="lantern"], [data-hraness-material="lantern"] *):is(.hraness-material-pane[data-depth="inset"]) {
    background-color: color-mix(in oklch, var(--background, Canvas) 70%, var(--hraness-material-plane));
    box-shadow: var(--hraness-material-inset);
  }

  /* A translucent enclosure, only where content actually passes behind it.
   * Resolve these tokens on the chrome itself for nested palette islands. */
  :where([data-hraness-material="lantern"], [data-hraness-material="lantern"] *):is(.hraness-material-chrome) {
    --hraness-material-chrome-paint: var(--surface, var(--ui-background, Canvas));
    --hraness-design-top-bar-edge: var(--hraness-material-outline);
    --hraness-material-chrome-blur: none;
    background-color: var(--hraness-material-chrome-paint);
    border-block-end: 1px solid var(--hraness-material-outline);
    box-shadow: inset 0 1px 0 var(--hraness-material-edge), 0 4px 12px rgb(0 0 0 / 0.04);
  }
  /* Bind the compiled TopBar's public paint seam at its own surface boundary. */
  :where([data-hraness-material="lantern"], [data-hraness-material="lantern"] *):is(.hraness-material-chrome.hraness-design-top-bar[data-surface="glass"]) {
    --hraness-design-top-bar-background: var(--hraness-material-chrome-paint);
    --hraness-design-top-bar-backdrop: var(--hraness-material-chrome-blur);
  }
  @supports (-webkit-backdrop-filter: blur(1px)) {
    :where([data-hraness-material="lantern"], [data-hraness-material="lantern"] *):is(.hraness-material-chrome) {
      --hraness-material-chrome-paint: color-mix(in srgb, var(--surface, var(--ui-background, Canvas)) 90%, transparent);
      --hraness-material-chrome-blur: blur(20px) saturate(1.1);
      -webkit-backdrop-filter: var(--hraness-material-chrome-blur);
    }
  }
  @supports (backdrop-filter: blur(1px)) {
    :where([data-hraness-material="lantern"], [data-hraness-material="lantern"] *):is(.hraness-material-chrome) {
      --hraness-material-chrome-paint: color-mix(in srgb, var(--surface, var(--ui-background, Canvas)) 90%, transparent);
      --hraness-material-chrome-blur: blur(20px) saturate(1.1);
      backdrop-filter: var(--hraness-material-chrome-blur);
    }
  }

  /* The wall is a flat palette plane. Its retired shaded faces, grain,
   * patterns, and light washes no longer paint, whatever tokens say. */
  :where([data-hraness-material="lantern"], [data-hraness-material="lantern"] *):is(.hraness-material-wall) {
    background-color: var(--background, var(--ui-background, Canvas));
    background-image: none;
    color: var(--hraness-material-ink);
  }

  /* A terminal remains a readable document. Source lines scroll intact;
   * only its enclosure catches light. Syntax spans inherit semantic colors. */
  :where([data-hraness-material="lantern"], [data-hraness-material="lantern"] *):is(.hraness-material-terminal) {
    min-inline-size: 0;
    overflow: hidden;
    border: 1px solid var(--hraness-material-outline);
    border-radius: .875rem;
    background: var(--hraness-material-plane);
    color: var(--hraness-material-ink);
    box-shadow: var(--hraness-material-lift);
  }
  :where([data-hraness-material="lantern"], [data-hraness-material="lantern"] *):is(.hraness-material-terminal__bar) {
    padding: .8rem 1.25rem;
    background: linear-gradient(to bottom, color-mix(in oklch, white 5%, var(--hraness-material-plane)), var(--hraness-material-plane));
    box-shadow: inset 0 1px 0 var(--hraness-material-edge), 0 1px 3px rgb(0 0 0 / 0.08);
    color: var(--hraness-material-muted);
    font: .8125rem/1.5 var(--font-mono, ui-monospace, monospace);
  }
  :where([data-hraness-material="lantern"], [data-hraness-material="lantern"] *):is(.hraness-material-code) {
    min-inline-size: 0;
    max-inline-size: 100%;
    margin: 0;
    padding: 1.25rem;
    overflow: auto;
    background: var(--hraness-material-plane);
    color: var(--hraness-material-ink);
    font: .875rem/1.75 var(--font-mono, ui-monospace, monospace);
    white-space: pre;
    overflow-wrap: normal;
    word-break: normal;
    tab-size: 2;
  }
  :where([data-hraness-material="lantern"], [data-hraness-material="lantern"] *):is(.hraness-material-code) code {
    background: none;
    padding: 0;
    font: inherit;
    white-space: inherit;
    overflow-wrap: inherit;
    word-break: inherit;
  }

  /* Plain HTML control adapters. Compiled UI primitives use the public
   * lanternControlStyles recipes through their documented controlXstyle seam.
   * Edge paint uses background images, leaving focus shadows and outlines alone. */
  :where([data-hraness-material="lantern"], [data-hraness-material="lantern"] *):is(.hraness-material-control) {
    background-image: linear-gradient(to bottom, var(--hraness-material-edge), transparent 2px);
  }
  :where([data-hraness-material="lantern"], [data-hraness-material="lantern"] *):is(.hraness-material-input) {
    background-image: linear-gradient(to bottom, var(--hraness-material-shade), transparent 4px);
    caret-color: var(--hraness-material-focus);
  }
  :where([data-hraness-material="lantern"], [data-hraness-material="lantern"] *):is(.hraness-material-choice[aria-pressed="true"], .hraness-material-choice[aria-selected="true"], .hraness-material-choice[data-selected]) {
    background-color: var(--hraness-material-warm-plane);
    color: var(--hraness-material-ink);
    background-image: linear-gradient(to top, var(--hraness-material-warm), var(--hraness-material-warm) 2px, transparent 2px);
  }
  :where([data-hraness-material="lantern"], [data-hraness-material="lantern"] *):is(.hraness-material-control:disabled, .hraness-material-control[aria-disabled="true"], .hraness-material-control[data-disabled], .hraness-material-input:disabled) {
    background-image: none;
  }

  /* A collection is a readable sequence, never a requirement to fill a grid.
   * Products own grouping, columns and the meaning of each row. Rows stay
   * unruled: the pane perimeter owns the only seam. */
  :where([data-hraness-material="lantern"], [data-hraness-material="lantern"] *):is(.hraness-material-rows) {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  :where([data-hraness-material="lantern"], [data-hraness-material="lantern"] *):is(.hraness-material-disclosure > summary) {
    cursor: pointer;
    min-block-size: 2.75rem;
    padding-block: 0.75rem;
  }
  :where([data-hraness-material="lantern"], [data-hraness-material="lantern"] *):is(.hraness-material-disclosure > summary:focus-visible) {
    outline: 2px solid var(--hraness-material-focus);
    outline-offset: 3px;
  }
  [data-hraness-material="lantern"] ::selection {
    background-color: var(--hraness-material-warm-plane);
    color: var(--hraness-material-ink);
  }

  @media (prefers-reduced-motion: reduce) {
    [data-hraness-material="lantern"] { --hraness-material-duration: 0ms; }
  }
  @media (prefers-reduced-transparency: reduce) {
    :where([data-hraness-material="lantern"], [data-hraness-material="lantern"] *):is(.hraness-material-chrome) {
      --hraness-material-chrome-paint: var(--surface, var(--ui-background, Canvas));
      --hraness-material-chrome-blur: none;
    }
  }
  @media (forced-colors: active) {
    [data-hraness-material="lantern"] {
      --hraness-material-plane: Canvas;
      --hraness-material-ink: CanvasText;
      --hraness-material-muted: CanvasText;
      --hraness-material-seam: CanvasText;
      --hraness-material-outline: CanvasText;
      --hraness-material-rest: none;
      --hraness-material-focus: Highlight;
      --hraness-material-warm-plane: Canvas;
      --hraness-material-warm: Highlight;
      --hraness-material-edge: transparent;
      --hraness-material-raised: none;
      --hraness-material-inset: none;
      --hraness-material-lift: none;
    }
    :where([data-hraness-material="lantern"], [data-hraness-material="lantern"] *):is(.hraness-material-wall, .hraness-material-chrome, .hraness-material-pane, .hraness-material-terminal, .hraness-material-terminal__bar, .hraness-material-code) {
      --hraness-material-chrome-paint: Canvas;
      --hraness-material-chrome-blur: none;
      background-color: Canvas;
      background-image: none;
      box-shadow: none;
    }
    :where([data-hraness-material="lantern"], [data-hraness-material="lantern"] *):is(.hraness-material-control, .hraness-material-input, .hraness-material-choice) { background-image: none; }
    :where([data-hraness-material="lantern"], [data-hraness-material="lantern"] *):is(.hraness-material-choice[aria-pressed="true"], .hraness-material-choice[aria-selected="true"], .hraness-material-choice[data-selected]) {
      background-color: Highlight;
      color: HighlightText;
      background-image: none;
    }
  }
}