/* Small shared baseline inspired by Giga Central's default UI layer. */
:root {
  --giga-surface: #faf8f4;
  --giga-ink: #2b211a;
  --giga-border: #eee8df;
  --ui-element-height: 36px;
  --ui-element-height-lg: 40px;
  --ui-element-radius: 10px;
  --ui-focus-ring: 0 0 0 2px #374151;
  --ui-input-border: #e5e7eb;
  --font-ui: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol", "Noto Color Emoji";
}

*, *::before, *::after { box-sizing: border-box; }

html { font-family: var(--font-ui); }

body {
  margin: 0;
  min-width: 320px;
  color: #0f172a;
  background: #fff;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.giga-surface { background: var(--giga-surface); }
.giga-ink { color: var(--giga-ink); }
.ui-field,
.giga-field {
  width: 100%; height: var(--ui-element-height-lg); border: 1px solid var(--ui-input-border);
  border-radius: var(--ui-element-radius); padding: 0 10px; background: #fff; font-size: 14px;
  line-height: 1.15; transition: outline-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.ui-field:focus, .giga-field:focus { outline: none; border-color: #9ca3af; box-shadow: var(--ui-focus-ring); }
textarea.ui-field, textarea.giga-field { height: auto; min-height: 96px; padding-top: 8px; padding-bottom: 8px; }
.ui-button,
.giga-button {
  position: relative; display: inline-flex; min-height: var(--ui-element-height); align-items: center;
  justify-content: center; border: 1px solid #e5e7eb; border-radius: var(--ui-element-radius);
  padding: 0 12px; font-size: 14px; line-height: 1; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.ui-button:hover { background: #f3f4f6; }
.ui-button.--lg { min-height: var(--ui-element-height-lg); padding: 0 16px; font-size: 16px; }
.ui-button.--sm { min-height: 24px; padding: 0 8px; font-size: 12px; }
.ui-button.--minimal { border-color: transparent; box-shadow: none; }
.ui-button.--solid { background: var(--giga-ink); border-color: var(--giga-ink); color: #fff; box-shadow: none; }
.ui-button.--solid:hover { background: #1a1410; border-color: #1a1410; }
.giga-button { min-height: var(--ui-element-height-lg); border-color: var(--giga-ink); background: var(--giga-ink); color: #fff; }
.giga-button:hover { background: #1a1410; box-shadow: 0 10px 20px -6px rgba(0, 0, 0, .22); transform: translateY(-1px); }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid #374151; outline-offset: 2px; }

button, input, textarea, select { font: inherit; }
