/* =========================================================================
 * AffluentOS — Interactions (Elevate System)
 *
 * Lifted from the production marketing site + product app
 * (`_source/website-v1/index.css`, `_source/product-app-v1/index.css`).
 * Provides the canonical hover / active / toggle visual treatment for any
 * interactive element — without inventing new colored backgrounds.
 *
 * Three utilities:
 *
 *   .hover-elevate          ← brightens on :hover
 *   .active-elevate         ← brightens on :active (press)
 *   .hover-elevate-2        ← stronger brighten on :hover
 *   .active-elevate-2       ← stronger brighten on :active
 *   .toggle-elevate         ← persistent overlay when .toggle-elevated is also present
 *   .toggle-elevate-2       ← same, stronger
 *
 *   .no-default-hover-elevate    ← escape hatch: opt-out of automatic hover
 *   .no-default-active-elevate   ← escape hatch: opt-out of automatic press
 *
 * Composition:
 *   <button class="hover-elevate active-elevate">…</button>
 *   <button class="toggle-elevate" data-state="on">…</button>  → add `toggle-elevated` when state="on"
 *
 * How it works:
 *   ::after sits ABOVE content (z-index 999), painted only on hover/active.
 *   ::before sits BEHIND content (z-index -1), painted while toggled.
 *   Together they stack — a button can be both toggled AND hovered, and the
 *   visual difference is automatic.
 *
 *   `inset: -1px` accounts for parent 1px borders so the overlay covers the
 *   border too (no "double line" artifact).
 *
 * Tokens:
 *   --elevate-1  4% ink overlay  — hover, light touch
 *   --elevate-2  8% ink overlay  — active, toggle, stronger
 *
 *   Defined per-mode in tokens.json. Dark uses white-alpha; light uses
 *   black-alpha. Same selectors, automatic contrast.
 * =========================================================================*/

@layer utilities {

  /* Hide the native search cancel button until we can style it properly */
  input[type="search"]::-webkit-search-cancel-button {
    display: none;
  }

  /* Placeholder styling for contentEditable divs */
  [contenteditable][data-placeholder]:empty::before {
    content: attr(data-placeholder);
    color: var(--ink-muted);
    pointer-events: none;
  }

  /* --- Escape hatches --- */
  .no-default-hover-elevate  { /* opt-out; no rules; suppresses :hover treatment via :not() in selectors below */ }
  .no-default-active-elevate { /* opt-out; no rules; suppresses :active treatment via :not() in selectors below */ }

  /* --- Toggle (persistent) overlay — sits BEHIND content ---
   * Required: position parent so ::before can be absolute.
   */
  .toggle-elevate::before,
  .toggle-elevate-2::before {
    content: "";
    pointer-events: none;
    position: absolute;
    inset: 0;
    border-radius: inherit;
    z-index: -1;
  }

  .toggle-elevate.toggle-elevated::before     { background-color: var(--elevate-1); }
  .toggle-elevate-2.toggle-elevated::before   { background-color: var(--elevate-2); }

  /* If the toggleable element has a 1px border, cover the border edge too */
  .border.toggle-elevate::before,
  .border.toggle-elevate-2::before { inset: -1px; }

  /* --- Hover / active overlay — sits ABOVE content --- */
  .hover-elevate:not(.no-default-hover-elevate),
  .active-elevate:not(.no-default-active-elevate),
  .hover-elevate-2:not(.no-default-hover-elevate),
  .active-elevate-2:not(.no-default-active-elevate) {
    position: relative;
    z-index: 0;
  }

  .hover-elevate:not(.no-default-hover-elevate)::after,
  .active-elevate:not(.no-default-active-elevate)::after,
  .hover-elevate-2:not(.no-default-hover-elevate)::after,
  .active-elevate-2:not(.no-default-active-elevate)::after {
    content: "";
    pointer-events: none;
    position: absolute;
    inset: 0;
    border-radius: inherit;
    z-index: 999;
    transition: background-color var(--motion-fast) var(--motion-ease);
  }

  .hover-elevate:hover:not(.no-default-hover-elevate)::after,
  .active-elevate:active:not(.no-default-active-elevate)::after {
    background-color: var(--elevate-1);
  }

  .hover-elevate-2:hover:not(.no-default-hover-elevate)::after,
  .active-elevate-2:active:not(.no-default-active-elevate)::after {
    background-color: var(--elevate-2);
  }

  /* Border-1px adjustment so the overlay covers the parent border edge */
  .border.hover-elevate:not(.no-default-hover-elevate)::after,
  .border.active-elevate:not(.no-default-active-elevate)::after,
  .border.hover-elevate-2:not(.no-default-hover-elevate)::after,
  .border.active-elevate-2:not(.no-default-active-elevate)::after { inset: -1px; }
}

/* =========================================================================
 * Glass panel — semantic shorthand used across the marketing site.
 * Card-like surface with backdrop blur, low-contrast border, soft shadow.
 * =========================================================================*/
.glass-panel {
  background-color: color-mix(in srgb, var(--surface-elevated) 60%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
}