/* SG-Gateway 22.08 UI foundation: tokens only. Geometry belongs to layout. */
:root {
  --sg-ui-page-pad-x: 30px;
  --sg-ui-page-pad-top: 28px;
  --sg-ui-page-pad-bottom: 46px;
  --sg-ui-page-gap: 18px;
  --sg-ui-section-gap: 16px;
  --sg-ui-grid-gap: 12px;
  --sg-ui-card-pad: 18px;
  --sg-ui-card-radius: 14px;
  --sg-ui-nested-radius: 10px;
  --sg-ui-control-radius: 9px;
  --sg-ui-control-height: 42px;
  --sg-ui-control-height-sm: 32px;
  --sg-ui-badge-height: 28px;
  --sg-ui-rail-inset: 18px;
  --sg-ui-rail-deep-inset: 30px;
  --sg-ui-focus-ring: 0 0 0 3px rgb(71 168 119 / 20%);

  --sg-ui-bg: #0c1114;
  --sg-ui-surface: #11181c;
  --sg-ui-surface-raised: #151e23;
  --sg-ui-surface-nested: #0f161a;
  --sg-ui-border: rgb(145 170 181 / 18%);
  --sg-ui-border-strong: rgb(145 170 181 / 28%);
  --sg-ui-text: #e8eff1;
  --sg-ui-text-muted: #91a3aa;
  --sg-ui-accent: #45a878;
  --sg-ui-accent-soft: rgb(69 168 120 / 14%);
  --sg-ui-info: #5b9bd5;
  --sg-ui-danger: #d76b70;
  --sg-ui-shadow: 0 10px 28px rgb(0 0 0 / 18%);
}

html[data-theme="light"] {
  --sg-ui-bg: #f4f7f7;
  --sg-ui-surface: #ffffff;
  --sg-ui-surface-raised: #f9fbfb;
  --sg-ui-surface-nested: #f3f6f6;
  --sg-ui-border: rgb(54 82 92 / 15%);
  --sg-ui-border-strong: rgb(54 82 92 / 24%);
  --sg-ui-text: #182226;
  --sg-ui-text-muted: #607078;
  --sg-ui-accent: #31845c;
  --sg-ui-accent-soft: rgb(49 132 92 / 11%);
  --sg-ui-info: #3978ad;
  --sg-ui-danger: #b95258;
  --sg-ui-shadow: 0 10px 28px rgb(37 56 64 / 9%);
}

@media (max-width: 760px) {
  :root {
    --sg-ui-page-pad-x: 16px;
    --sg-ui-page-pad-top: 18px;
    --sg-ui-page-pad-bottom: 28px;
    --sg-ui-card-pad: 16px;
    --sg-ui-rail-inset: 14px;
    --sg-ui-rail-deep-inset: 14px;
  }
}