/* CLIXHOUSE design system — 2026 modern CSS primitives
   ─────────────────────────────────────────────────────────────────
   Patterns that ship cross-engine in 2026 but historically required
   JavaScript. Each pattern is attributed to the developer who put
   it on the map. Sites opt in à la carte.

   Imported via:  @import url("/static/design/modern.css") layer(components);

   Inventory:
     light-dark()              — Adam Argyle / web.dev
     :has() form validation    — multiple; widely-available Baseline
     @starting-style entries   — Bramus + Adam (Chrome blog "entry/exit")
     :focus-within groups      — common Modern CSS pattern (S. Eckles)
     Container style queries   — Una Kravets
     :user-valid / :user-invalid — modern form-state pseudo-classes
     transition-behavior       — Bramus, paired with @starting-style
     forced-colors-safe focus  — Manuel Matuzović (transparent outline)

   Refs:
     light-dark() spec   — https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/color_value/light-dark
     :has() guide        — https://webkit.org/blog/13096/css-has-pseudo-class/
     @starting-style     — https://developer.chrome.com/blog/entry-exit-animations
     Style queries       — https://una.im/style-queries/
     Matuzović outline   — https://www.matuzo.at/blog/2026/box-shadow-no-alternative-to-outline
*/

@layer components {

  /* ── light-dark() — token-level dark/light pairing ─────────────── */
  /* Per Adam Argyle's pattern: declare both colors inline; the
      browser picks based on color-scheme. No @media query, no JS.
      Sites that prefer this pattern set color-scheme on :root and
      use light-dark() inside their @layer tokens block. Example:

        :root { color-scheme: light dark; }
        :root {
          --surface-0: light-dark(oklch(0.98 0 0), oklch(0.18 0 0));
          --text-strong: light-dark(oklch(0.18 0 0), oklch(0.96 0 0));
        }

      This file does not impose tokens — it only documents the pattern.
      `color-scheme: light dark` is set ONCE, in tokens-defaults.css
      (@layer tokens) — the framework's single dark-mode source — and is
      intentionally NOT repeated here (a components-layer :root copy was
      redundant and sat in the wrong layer). */

  /* ── :has() — form-group validation styling ────────────────────── */
  /* The pattern: style a form-group container based on the input's
      validity state. Replaces "add invalid class via JS on blur".
      Uses :user-valid / :user-invalid (only react after user input,
      not on initial render) instead of :valid / :invalid. */
  .field:has(:user-invalid) {
    --field-border: var(--accent-error, oklch(0.55 0.2 25));
  }
  .field:has(:user-valid) {
    --field-border: var(--accent-success, oklch(0.55 0.15 145));
  }
  .field:has(:focus-visible) {
    --field-border: var(--focus-ring, currentColor);
  }
  .field {
    --field-border: var(--border-subtle, currentColor);
  }
  .field input,
  .field select,
  .field textarea {
    border-color: var(--field-border);
    transition: border-color var(--motion-fast, 150ms) ease;
  }
  /* Form-level: disable submit while any required field is invalid. */
  form:has(:required:user-invalid) [type="submit"],
  form:has(:required:placeholder-shown) [type="submit"] {
    opacity: 0.6;
    pointer-events: none;
  }

  /* ── @starting-style — popover/dialog entry/exit ───────────────── */
  /* The enter/exit MOTION for [popover] + <dialog> (@starting-style +
     transition-behavior: allow-discrete), plus .drawer and .collapsible,
     now lives in motion.css (the one motion home), tokenized and
     data-motion-aware. modern.css keeps the non-motion :has()/style-query/
     forced-colors patterns. */

  /* ── :focus-within — group focus visualization ─────────────────── */
  /* Stephanie Eckles smolcss pattern: highlight a container when
      any of its children are focused. Useful for nav menus, form
      groups, card lists. */
  .focus-group:focus-within {
    background: var(--surface-2, transparent);
    border-radius: var(--radius-md, 0.5rem);
  }

  /* ── Container style queries — theme by parent custom property ── */
  /* Una Kravets pattern: a parent declares a theme custom property;
      children adapt without selectors. Example: a <section> sets
      --section-theme: invert, and its children read it via @container.
      This is the cleanest theme-section-without-class-pollution
      pattern. Requires the parent to be a style container by
      declaration (which is the default for custom properties).

      Example usage in a site:

        @container style(--section-theme: dark) {
          h2 { color: var(--paper); }
          p  { color: var(--surface-2); }
        }
  */

  /* ── Forced-colors safe focus (Matuzović) ──────────────────────── */
  /* The framework's a11y.css uses outline + box-shadow. This file
      reinforces the rule: never use box-shadow as the SOLE focus
      indicator. box-shadow computes to none in forced-colors mode;
      the outline is what survives. If a component must remove the
      default outline (rare), it MUST keep a transparent outline
      so forced-colors can repaint it.

      Anti-pattern (forced-colors invisible focus):
        .btn:focus { outline: none; box-shadow: 0 0 0 3px blue; }

      Pattern (forced-colors safe):
        .btn:focus-visible {
          outline: 2px solid transparent;
          box-shadow: 0 0 0 3px var(--focus-ring);
        }
  */

  /* ── clip-path vs border-shape — keep the outline alive ────────── */
  /* Per Temani Afif (css-tip.com/border-shape/): a `clip-path` value
      DESTROYS the element's box-shadow + outline + border by trimming
      the painted area. That kills the transparent-outline forced-
      colors guard we rely on for .btn and form inputs (patterns.css).

      `border-shape` (Chrome 147+) is the correct property for
      non-rectangular elements that need to keep their decorations:

        .btn {
          border-shape: shape(from 0 0 ...);  // shape + outline both paint
        }
        .btn-clipped {
          clip-path: shape(from 0 0 ...);     // shape paints, outline dies
        }

      Anti-pattern: fancy clipped buttons via `clip-path`. They will
      silently fail WCAG 2.4.13 in forced-colors mode. Reach for
      `border-shape`; gracefully degrade to a rectangular shape in
      engines that don't ship it yet via @supports. */
}