/* Generated by tools/poc-builder from design/tokens/focx/tokens.json.
 * Do not edit by hand — regenerate instead. Every value below resolves to a
 * published Figma variable (docs/drift-gate.md). */

:root {
  --action-fill-hover: #222222;
  --action-fill-text: #fcfcfc;
  --action-fill: #050505;
  --border-focus-ring: 2px;
  --border-focus: #050505;
  --border-hairline: 1px;
  --border-subtle: #ececec;
  --control-h-lg: 44px;
  --control-h-md: 34px;
  --control-h-sm: 28px;
  --control-px-lg: 18px;
  --control-px-md: 14px;
  --control-px-sm: 10px;
  --font-display: 'The Fox Tail';
  --font-sans: 'Geist';
  --radius-card: 16px;
  --radius-control: 12px;
  --radius-pill: 999px;
  --space-3: 6px;
  --status-danger-fill: #7c2d36;
  --status-danger: #b72a36;
  --surface-1: #f9f9f9;
  --surface-inverse: #050505;
  --text-body: 15px;
  --text-brand-eyebrow: 12px;
  --text-brand-hero: 64px;
  --text-caption: 12px;
  --text-inverse: #fcfcfc;
  --text-label: 13px;
  --text-subheading: 17px;
  --weight-medium: 500;
  --weight-regular: 400;
}

* { box-sizing: border-box; margin: 0; }

body {
  font-family: var(--font-sans), system-ui, sans-serif;
  background: var(--surface-1);
  color: var(--surface-inverse);
  padding: var(--control-h-md);
}

.eyebrow {
  font-size: var(--text-brand-eyebrow);
  font-weight: var(--weight-medium);
  letter-spacing: var(--text-brand-eyebrow);
  text-transform: uppercase;
}

h1 {
  font-size: var(--text-subheading);
  font-weight: var(--weight-medium);
  margin: var(--space-3) 0 var(--control-px-lg);
}

.sheet {
  background: var(--surface-1);
  border: var(--border-hairline) solid var(--border-subtle);
  border-radius: var(--radius-card);
  padding: var(--control-h-lg);
  margin-bottom: var(--control-px-lg);
}

.sheet h2 {
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  margin-bottom: var(--control-px-lg);
}

.grid {
  display: grid;
  grid-template-columns: repeat(4, max-content);
  gap: var(--control-h-lg) var(--control-h-lg);
  align-items: center;
}

.confirm-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  border: none;
  cursor: pointer;
  font-family: var(--font-sans), system-ui, sans-serif;
  font-weight: var(--weight-medium);
  color: var(--action-fill-text);
}

/* Sizes — heights, paddings, and type straight from control tokens */
.btn--sm { height: var(--control-h-sm); padding: 0 var(--control-px-sm); font-size: var(--text-label); }
.btn--md { height: var(--control-h-md); padding: 0 var(--control-px-md); font-size: var(--text-label); }
.btn--lg { height: var(--control-h-lg); padding: 0 var(--control-px-lg); font-size: var(--text-body); }

/* Shapes */
.btn--pill { border-radius: var(--radius-pill); }
.btn--control { border-radius: var(--radius-control); }

/* Button/Primary */
.btn--primary { background: var(--action-fill); }
.btn--primary:hover, .btn--primary.is-hover { background: var(--action-fill-hover); }

/* Button/Destructive */
.btn--destructive { background: var(--status-danger); }
.btn--destructive:hover, .btn--destructive.is-hover { background: var(--status-danger-fill); }

/* States shared across variants */
.btn:focus-visible, .btn.is-focused {
  outline: var(--border-focus-ring) solid var(--border-focus);
  outline-offset: var(--border-focus-ring);
}
.btn[disabled] { opacity: 0.4; cursor: not-allowed; }
.btn[disabled]:hover { background: var(--action-fill); }
.btn--destructive[disabled]:hover { background: var(--status-danger); }