/* UI shape/depth/motion tokens — kept in their own file, separate from
   tokens.css's colours, purely for organisation (colour vs. everything
   else). There used to be a second, switchable axis here (3 selectable UI
   "styles" on top of the 4 colour themes) — removed by explicit request
   ("remove the 2 new designs... just keep the original"), so this file is
   back to a single definition: MooMoo's one true look. The indirection
   tokens app.css reads (`--panel-clip`/`--panel-radius`,
   `--control-clip`/`--control-radius`) were left in place rather than
   reverted to hardcoded `--notch-lg`/`--notch-sm` everywhere — they cost
   nothing extra now (there's only one value each can ever be) and mean a
   future style axis, if ever wanted again, wouldn't need touching app.css
   a second time. */
:root {
  --style-heading-weight: 600;
  --style-heading-tracking: 0;
  --style-heading-transform: none;

  --px-step: 4px;
  --px-border: 3px;
  --notch-sm: polygon(
    var(--px-step) 0, calc(100% - var(--px-step)) 0,
    100% var(--px-step), 100% calc(100% - var(--px-step)),
    calc(100% - var(--px-step)) 100%, var(--px-step) 100%,
    0 calc(100% - var(--px-step)), 0 var(--px-step)
  );
  --notch-lg: polygon(
    calc(var(--px-step) * 2) 0, calc(100% - var(--px-step) * 2) 0,
    calc(100% - var(--px-step) * 2) var(--px-step), calc(100% - var(--px-step)) var(--px-step),
    calc(100% - var(--px-step)) calc(var(--px-step) * 2), 100% calc(var(--px-step) * 2),
    100% calc(100% - var(--px-step) * 2), calc(100% - var(--px-step)) calc(100% - var(--px-step) * 2),
    calc(100% - var(--px-step)) calc(100% - var(--px-step)), calc(100% - var(--px-step) * 2) calc(100% - var(--px-step)),
    calc(100% - var(--px-step) * 2) 100%, calc(var(--px-step) * 2) 100%,
    calc(var(--px-step) * 2) calc(100% - var(--px-step)), var(--px-step) calc(100% - var(--px-step)),
    var(--px-step) calc(100% - var(--px-step) * 2), 0 calc(100% - var(--px-step) * 2),
    0 calc(var(--px-step) * 2), var(--px-step) calc(var(--px-step) * 2),
    var(--px-step) var(--px-step), calc(var(--px-step) * 2) var(--px-step)
  );

  --panel-clip: var(--notch-lg);
  --panel-radius: 0px;
  --control-clip: var(--notch-sm);
  --control-radius: 0px;
  --panel-pad: var(--s4);
  --control-pad-y: var(--s3);
  --control-pad-x: var(--s4);

  --pixel-bevel: inset 2px 2px 0 var(--bevel-light), inset -2px -2px 0 var(--bevel-dark);
  --pixel-bevel-sm: inset 1.5px 1.5px 0 var(--bevel-light), inset -1.5px -1.5px 0 var(--bevel-dark);
  --ring-color: var(--line-strong);
  --pixel-ring: inset 0 0 0 var(--px-border) var(--ring-color);

  --shadow-sm: 0 2px 0 var(--mm-border-dark),
    0 3px 6px color-mix(in srgb, var(--shadow-tint) var(--shadow-alpha-sm), transparent);
  --shadow-md: 0 3px 0 var(--mm-border-dark),
    0 6px 14px color-mix(in srgb, var(--shadow-tint) var(--shadow-alpha-md), transparent);
  --drop-sm: drop-shadow(0 2px 0 var(--mm-border-dark))
    drop-shadow(0 3px 5px color-mix(in srgb, var(--shadow-tint) var(--shadow-alpha-sm), transparent));
  --drop-md: drop-shadow(0 3px 0 var(--mm-border-dark))
    drop-shadow(0 6px 12px color-mix(in srgb, var(--shadow-tint) var(--shadow-alpha-md), transparent));
  --drop-lg: drop-shadow(0 5px 0 var(--mm-border-dark))
    drop-shadow(0 12px 24px color-mix(in srgb, var(--shadow-tint) var(--shadow-alpha-lg), transparent));

  --ease: cubic-bezier(.34, 1.26, .64, 1);
}