/*
==========================================================
SPOT SKETCH v1.3
Central Design and Runtime Tokens

Single ownership point for application-wide CSS custom properties.
Breakpoint-specific overrides remain in responsive.css.
==========================================================
*/

:root{

  /* Color and surface */
  --bg:#f4f4f5;
  --panel:rgba(255,255,255,.72);
  --text:#1d1d1f;
  --muted:#8a8a8f;
  --accent:#0A84FF;
  --orange:#ff9500;
  --border:rgba(0,0,0,.08);
  --green:#34c759;
  --yellow:#ffcc00;
  --red:#ff3b30;

  /* Layer scale */
  --layer-header:1200;
  --layer-workflow-overlay:4000;
  --layer-workspace:4800;
  --layer-project-manager:5000;
  --layer-image-replacement:5200;
  --layer-dialog:7000;
  --layer-notification:7200;
  --layer-autocomplete:7400;
  --layer-move-cursor:7600;
  --layer-panel:40;
  --layer-floating:80;
  --layer-picker:2200;

  /* Motion */
  --motion-fast:140ms;
  --motion-standard:220ms;
  --motion-panel:280ms;
  --ease-enter:cubic-bezier(.2,.8,.2,1);
  --ease-exit:cubic-bezier(.4,0,1,1);

  /* Spacing and geometry */
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-8:32px;
  --radius-control:999px;
  --radius-panel:20px;
  --touch-target-min:44px;

  /* Breakpoint reference */
  --viewport-mobile-max:620px;
  --viewport-tablet-max:900px;
  --viewport-laptop-max:1280px;

  /* Runtime viewport and safe area */
  --app-viewport-width:100vw;
  --app-viewport-height:100vh;
  --app-layout-viewport-width:100vw;
  --app-layout-viewport-height:100vh;
  --app-viewport-offset-top:0px;
  --app-viewport-offset-left:0px;
  --app-keyboard-inset:0px;
  --app-device-pixel-ratio:1;
  --safe-area-top:env(safe-area-inset-top, 0px);
  --safe-area-right:env(safe-area-inset-right, 0px);
  --safe-area-bottom:env(safe-area-inset-bottom, 0px);
  --safe-area-left:env(safe-area-inset-left, 0px);

  /* Responsive shell */
  --responsive-app-gutter:20px;
  --responsive-surface-inset:24px;
  --responsive-header-top:14px;
  --responsive-header-bottom:12px;
  --responsive-header-inline:20px;
  --responsive-header-padding-inline:16px;
  --responsive-header-padding-block:10px;
  --responsive-header-gap:14px;
  --responsive-control-gap:10px;
  --responsive-panel-radius:24px;
  --responsive-dialog-radius:18px;
  --responsive-control-height:36px;
  --responsive-touch-target:44px;
  --responsive-mobile-action-offset:12px;
  --responsive-notification-offset:20px;
  --responsive-metering-top-inset:96px;
  --responsive-calculation-top-inset:84px;
  --responsive-type-scale:1;

  /* Mobile shell and workflows */
  --mobile-action-bar-height:72px;
  --mobile-action-bar-gap:10px;
  --mobile-shell-inline:10px;
  --mobile-shell-header-radius:22px;
  --mobile-shell-surface-radius:24px;
  --mobile-shell-z:1380;
  --mobile-sheet-z:1520;
  --recording-touch-hit-size:60px;
  --recording-mobile-picker-gap:12px;
  --recording-mobile-picker-max-height:58vh;
  --mobile-form-footer-gap:10px;
  --mobile-project-card-radius:18px;
  --mobile-project-control-height:46px;
  --mobile-collapsed-bar-peek:13px;
  --mobile-expanded-bar-height:52px;
  --mobile-fixed-bar-content-height:46px;
  --calculation-drawer-notch-height:36px;
  --calculation-drawer-radius:15px;
}