/*
 * portal_materials.css
 * Reusable surface definitions as CSS custom properties + utility classes.
 *
 * Materials are named by their VISUAL QUALITY, not by where they're used:
 *   frosted        — primary frosted glass (sidebar, app groups, profile)
 *   frosted-thin   — lighter frosted glass (inline cards, review items)
 *   control        — dark-tinted inline control surface (search, toggles)
 *   control-active — raised white pill for selected segment
 *   nav-active     — subtle highlight for the active sidebar row
 *
 * Swap a material here to change it everywhere at once.
 * Use the .surface-* utility classes in HTML — never inline the vars
 * in portal_layout.css.
 */

:root {
  /* ── Frosted Glass ──────────────────────────────────────────────────────
   * The primary frosted glass surface. Heavy blur, high opacity.
   * Used by: sidebar, app groups on the launchpad, profile container.
   */
  --material-frosted-bg: linear-gradient(
    180deg,
    rgb(255 255 255 / 0.82) 0%,
    rgb(255 255 255 / 0.76) 100%
  );
  --material-frosted-border: 1px solid rgb(255 255 255 / 0.55);
  --material-frosted-backdrop: blur(40px) saturate(1.4) brightness(1.06);
  --material-frosted-radius: 1.8rem;

  /* ── Frosted Glass (Thin) ───────────────────────────────────────────────
   * Lighter, less opaque frosted surface for smaller inline cards.
   */
  --material-frosted-thin-bg: linear-gradient(
    180deg,
    rgb(255 255 255 / 0.48) 0%,
    rgb(255 255 255 / 0.30) 100%
  );
  --material-frosted-thin-border: 1px solid rgb(255 255 255 / 0.35);
  --material-frosted-thin-backdrop: blur(20px) saturate(2.0) brightness(1.04);

  /* ── Control ─────────────────────────────────────────────────────────────
   * Dark-tinted surface for inline controls sitting inside a panel.
   * Used by: search field, segmented control (Apps/Games) container.
   */
  --material-control-bg: rgb(var(--theme-rgb, 110 55 122) / 0.07);
  --material-control-border: 1px solid rgb(0 0 0 / 0.10);
  --material-control-bg-focus: rgb(var(--theme-rgb, 110 55 122) / 0.10);
  --material-control-border-focus: 1px solid rgb(var(--theme-rgb, 110 55 122) / 0.20);

  /* ── Control Active ──────────────────────────────────────────────────────
   * Raised white pill for the selected item within a segmented control.
   */
  --material-control-active-bg: linear-gradient(
    180deg,
    rgb(255 255 255 / 0.95) 0%,
    rgb(255 255 255 / 0.78) 100%
  );
  --material-control-active-shadow:
    inset 0 0 0 1px rgb(0 0 0 / 0.10),
    0 1px 3px rgb(0 0 0 / 0.10),
    inset 0 1px 0 rgb(255 255 255 / 0.90);

  /* ── Nav Active ──────────────────────────────────────────────────────────
   * Subtle highlight for the active row in sidebar navigation.
   */
  --material-nav-active-bg: linear-gradient(
    180deg,
    rgb(255 255 255 / 0.42) 0%,
    rgb(var(--theme-rgb, 110 55 122) / 0.12) 100%
  );
  --material-nav-active-border: 1px solid rgb(var(--theme-rgb, 110 55 122) / 0.18);

  /* ── Legacy aliases ──────────────────────────────────────────────────────
   * Old names (panel, group, card) kept as aliases until all CSS is
   * migrated. New code should use --material-frosted-* directly.
   */
  --material-panel-bg: var(--material-frosted-bg);
  --material-panel-border: var(--material-frosted-border);
  --material-panel-backdrop: var(--material-frosted-backdrop);
  --material-panel-radius: var(--material-frosted-radius);
  --material-group-bg: var(--material-frosted-bg);
  --material-group-border: var(--material-frosted-border);
  --material-group-backdrop: var(--material-frosted-backdrop);
  --material-card-bg: var(--material-frosted-thin-bg);
  --material-card-border: var(--material-frosted-thin-border);
  --material-card-backdrop: var(--material-frosted-thin-backdrop);
}

/* ── Utility classes ─────────────────────────────────────────────────────── */

.surface-frosted {
  background: var(--material-frosted-bg);
  border: var(--material-frosted-border);
  backdrop-filter: var(--material-frosted-backdrop);
  -webkit-backdrop-filter: var(--material-frosted-backdrop);
}

.surface-frosted-thin {
  background: var(--material-frosted-thin-bg);
  border: var(--material-frosted-thin-border);
  backdrop-filter: var(--material-frosted-thin-backdrop);
  -webkit-backdrop-filter: var(--material-frosted-thin-backdrop);
}

/* Legacy aliases — old names kept for views not yet migrated. */
.surface-panel,
.surface-group {
  background: var(--material-frosted-bg);
  border: var(--material-frosted-border);
  backdrop-filter: var(--material-frosted-backdrop);
  -webkit-backdrop-filter: var(--material-frosted-backdrop);
}

.surface-card {
  background: var(--material-frosted-thin-bg);
  border: var(--material-frosted-thin-border);
  backdrop-filter: var(--material-frosted-thin-backdrop);
  -webkit-backdrop-filter: var(--material-frosted-thin-backdrop);
}

.surface-control {
  background: var(--material-control-bg);
  border: var(--material-control-border);
}

.surface-control-active {
  background: var(--material-control-active-bg);
  box-shadow: var(--material-control-active-shadow);
}