/* Shape. The logo is built from right angles and diagonal cuts ("cortes
   diagonales que emulan un monitor"), so the system is square by default.
   Radii exist only to soften controls; nothing is pill-shaped except status dots.
   The 45° corner cut (--cut-*) is the brand's one decorative shape. */
:root{
  --radius-none:0;--radius-xs:2px;--radius-sm:3px;--radius-md:4px;--radius-lg:6px;--radius-full:999px;

  --cut-sm:8px;--cut-md:14px;--cut-lg:24px;
  --clip-cut-tr:polygon(0 0,calc(100% - var(--cut-md)) 0,100% var(--cut-md),100% 100%,0 100%); /* @kind other */
  --clip-cut-br:polygon(0 0,100% 0,100% calc(100% - var(--cut-md)),calc(100% - var(--cut-md)) 100%,0 100%); /* @kind other */
  --clip-cut-bl:polygon(0 0,100% 0,100% 100%,var(--cut-md) 100%,0 calc(100% - var(--cut-md))); /* @kind other */

  /* shadows are used sparingly: lifted surfaces only (menus, dialogs, sticky bars) */
  --shadow-none:none;
  --shadow-xs:0 1px 2px rgba(22,34,42,.08);
  --shadow-sm:0 2px 6px rgba(22,34,42,.08);
  --shadow-md:0 8px 20px rgba(22,34,42,.12);
  --shadow-lg:0 20px 48px rgba(22,34,42,.18);
  --shadow-inset-top:inset 0 1px 0 rgba(255,255,255,.08);

  --blur-glass:saturate(140%) blur(10px); /* @kind other */
  --grid-line:rgba(34,49,58,.07);
  --grid-line-inverse:rgba(255,255,255,.07);
  --pattern-blueprint:repeating-linear-gradient(0deg,var(--grid-line) 0 1px,transparent 1px 32px),repeating-linear-gradient(90deg,var(--grid-line) 0 1px,transparent 1px 32px); /* @kind other */
  --pattern-blueprint-inverse:repeating-linear-gradient(0deg,var(--grid-line-inverse) 0 1px,transparent 1px 32px),repeating-linear-gradient(90deg,var(--grid-line-inverse) 0 1px,transparent 1px 32px); /* @kind other */
  --pattern-hazard:repeating-linear-gradient(135deg,var(--red-500) 0 12px,var(--white) 12px 24px); /* @kind other */
}