/* ============================================================
   PRIIME · ELEVATION, GRADIENTS & TEXTURE TOKENS
   Lighting law: light comes from DIRECTLY ABOVE. Every raised
   element gets a bright top edge, a soft cast shadow below, and
   a faint dark inset at the bottom lip. Recessed elements
   (screens, grooves) invert this. Never the harsh flat-design
   drop shadow; never glassmorphism blur.
   ============================================================ */

:root {
  /* ---------- Elevation (soft & realistic) ---------- */
  --e-key:        0 1px 0 #fff inset, 0 -2px 3px rgba(0,0,0,.05) inset, 0 3px 4px rgba(0,0,0,.2), 0 7px 13px rgba(0,0,0,.08);
  --e-key-dark:   0 1px 0 rgba(255,255,255,.1) inset, 0 3px 5px rgba(0,0,0,.45), 0 9px 17px rgba(0,0,0,.22);
  --e-key-orange: 0 1px 0 rgba(255,255,255,.45) inset, 0 3px 6px rgba(217,58,17,.55), 0 9px 17px rgba(43,92,255,.22);
  --e-panel:      0 1px 0 rgba(255,255,255,.85) inset, 0 -1px 2px rgba(0,0,0,.05) inset, 0 18px 44px rgba(0,0,0,.16);
  --e-card:       0 1px 0 rgba(255,255,255,.95) inset, 0 -2px 4px rgba(0,0,0,.04) inset, 0 26px 46px -18px rgba(0,0,0,.24), 0 6px 14px rgba(0,0,0,.06);
  --e-float:      0 10px 24px rgba(0,0,0,.16);
  --e-inset:      0 3px 6px rgba(0,0,0,.55) inset, 0 1px 0 rgba(255,255,255,.5);   /* recessed wells */
  /* OLED / LCD screen */
  --e-screen:     inset 0 2px 7px rgba(0,0,0,.8), 0 1px 0 rgba(255,255,255,.9); /* @kind shadow */
  --e-groove:     0 2px 3px rgba(0,0,0,.5) inset, 0 -1px 0 rgba(255,255,255,.2);    /* fader / track */
  --e-contact:    0 4px 8px rgba(0,0,0,.25);                                        /* control on panel */
  --e-cap:        0 5px 8px rgba(0,0,0,.3), 0 1px 0 rgba(255,255,255,.5) inset, 0 -2px 4px rgba(0,0,0,.12) inset; /* knob cap */
  /* Layered float — ground a rendered device as a real object (never a single drop-shadow) */
  --e-device:     0 8px 12px rgba(0,0,0,.13), 0 30px 44px rgba(0,0,0,.20), 0 64px 92px rgba(0,0,0,.12);

  /* ---------- Gradients (anodized surfaces) ---------- */
  --grad-plate:    linear-gradient(168deg, #fafaf8 0%, #ededea 60%, #e4e4e0 100%); /* @kind color */
  /* neumorphic plate (card shell) */
  --grad-card:     linear-gradient(157deg, #fff 0%, #f1efeb 56%, #e7e4de 100%); /* @kind color */
  --grad-body:     linear-gradient(168deg, #a6a6a1 0%, #9a9a95 55%, #8e8e89 100%); /* @kind color */
  --grad-key:      linear-gradient(180deg, #fafaf8, #e7e7e3); /* @kind color */
  --grad-key-dark: linear-gradient(180deg, #2c2c2c, #121212); /* @kind color */
  --grad-orange:   linear-gradient(180deg, #8AB9FF, #2B5CFF); /* @kind color */
  --grad-device:   linear-gradient(160deg, #cfcfca, #bcbcb6); /* @kind color */

  /* ---------- Texture motifs (data-as-texture) ---------- */
  /* blueprint paper: dot grid (marketing background) */
  --tex-dots: radial-gradient(#dcd8d0 1px, transparent 1.5px); /* @kind other */
  --tex-dots-size: 24px 24px; /* @kind other */
  /* blueprint grid: graph-paper lines */
  --tex-grid: linear-gradient(var(--alu-200) 1px, transparent 1px), linear-gradient(90deg, var(--alu-200) 1px, transparent 1px); /* @kind other */
  /* engineering diagonal hatch */
  --tex-hatch: repeating-linear-gradient(45deg, var(--g-300) 0 1px, transparent 1px 9px); /* @kind other */
  /* accent hatch (reserved / payoff cell) */
  --tex-hatch-o: repeating-linear-gradient(135deg, rgba(43,92,255,.10) 0 6px, transparent 6px 12px); /* @kind other */
  /* scanlines (recessed screen) */
  --tex-scanline: repeating-linear-gradient(180deg, #0b0b0b 0, #0b0b0b 2px, #0f0f0f 2px, #0f0f0f 3px); /* @kind other */
  /* dot-matrix / perforated grille (dark panels) */
  --tex-matrix: radial-gradient(#5a5a5a 1.3px, transparent 1.5px); /* @kind other */
}

/* anodized grain — apply .grain to any aluminium/grey surface (needs position:relative).
   Subtle: felt, not seen. */
.grain::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 150px 150px;
  opacity: .05;
  mix-blend-mode: overlay;
}