/* Copyright 2026 Adibyte Ltd. SPDX-License-Identifier: Apache-2.0 */
/**
 * Adibyte Design System — material classes
 * ----------------------------------------
 * Framework-free surface recipes built only from `design-tokens.css`.
 * Import after the tokens and before app.css:
 *
 *   import "./design-tokens.css";
 *   import "./materials.css";
 *
 * Every class composes tokens; none hardcodes a colour. A surface is a
 * material class plus, optionally, a modifier:
 *
 *   .ab-glass            raised glass (cards, inputs)
 *   .ab-glass--overlay   overlay glass (menus, modals, popovers)
 *   .ab-alu              anodised brushed aluminium (light text)
 *   .ab-alu--natural     natural brushed aluminium (dark text)
 *   .ab-alu--fine        finer grain for small controls
 *   .ab-interactive      hover lift + press, for controls only
 */

.ab-glass {
  position: relative;
  overflow: hidden;
  background-color: var(--ab-glass-fill-default);
  background-image: var(--ab-glass-optic);
  border: 1px solid var(--ab-glass-rim);
  border-radius: var(--ab-radius-glass);
  box-shadow: var(--ab-specular-top), var(--ab-shadow-glass-raised);
  isolation: isolate;
  -webkit-backdrop-filter: var(--ab-glass-filter-raised);
  backdrop-filter: var(--ab-glass-filter-raised);
}

.ab-glass::before {
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 1px;
  pointer-events: none;
  content: "";
  background: var(--ab-glass-rim-gradient);
  border-radius: inherit;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.ab-glass--overlay {
  background-color: var(--ab-glass-fill-thick);
  background-image: var(--ab-glass-optic-strong);
  border-color: var(--ab-glass-rim-strong);
  box-shadow: var(--ab-specular-top-strong), var(--ab-shadow-glass-overlay);
  -webkit-backdrop-filter: var(--ab-glass-filter-overlay);
  backdrop-filter: var(--ab-glass-filter-overlay);
}

.ab-glass--overlay::before {
  background: var(--ab-glass-rim-gradient-strong);
}

/* Brushed aluminium. Layer order, top to bottom: anisotropic highlight,
 * filament grain, metal fill. Blend modes pair with that order. */
.ab-alu {
  color: var(--ab-on-alu-anodised);
  background-color: var(--ab-alu-anodised-mid);
  background-image:
    var(--ab-alu-anisotropy), var(--ab-texture-brushed),
    var(--ab-alu-fill-anodised);
  background-size:
    100% 100%,
    var(--ab-texture-brushed-size),
    100% 100%;
  border: 1px solid var(--ab-alu-edge-dark);
  border-radius: var(--ab-radius-lg);
  box-shadow: var(--ab-shadow-alu-raised);
  background-blend-mode: soft-light, overlay, normal;
}

.ab-alu--natural {
  color: var(--ab-on-alu-natural);
  background-color: var(--ab-alu-natural-mid);
  background-image:
    var(--ab-alu-anisotropy), var(--ab-texture-brushed),
    var(--ab-alu-fill-natural);
  border-color: var(--ab-alu-edge-light);
}

.ab-alu--fine {
  background-image:
    var(--ab-alu-anisotropy), var(--ab-texture-brushed-fine),
    var(--ab-alu-fill-anodised);
  background-size:
    100% 100%,
    var(--ab-texture-brushed-fine-size),
    100% 100%;
}

.ab-alu--natural.ab-alu--fine {
  background-image:
    var(--ab-alu-anisotropy), var(--ab-texture-brushed-fine),
    var(--ab-alu-fill-natural);
}

/* Controls only. Surfaces that merely sit on the page must not move. */
.ab-interactive {
  cursor: pointer;
  transition:
    transform var(--ab-duration-fast) var(--ab-ease-state),
    filter var(--ab-duration-fast) var(--ab-ease-state);
}

.ab-interactive:hover {
  filter: brightness(1.12);
  transform: translateY(-1px);
}

.ab-interactive:active {
  filter: brightness(0.94);
  transform: translateY(0);
}

.ab-interactive:focus-visible {
  outline: var(--ab-focus-outline);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .ab-interactive,
  .ab-interactive:hover,
  .ab-interactive:active {
    transform: none;
    transition: none;
  }
}

/* Print: paper has no backdrop to refract, no hover, and drops shadows to
 * ink-friendly hairlines. Glass becomes a white panel with a rule; aluminium
 * keeps its colour so machined controls still read in a printed document. */
@media print {
  .ab-glass,
  .ab-glass--overlay {
    background: var(--ab-surface);
    background-image: none;
    border: 1px solid var(--ab-border-strong);
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    break-inside: avoid;
  }

  .ab-alu {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    box-shadow: none;
    break-inside: avoid;
  }

  .ab-interactive {
    filter: none;
    transform: none;
  }
}