Checkpoint

src/styles/components/_forms.scss

@@ -0,0 +1,35 @@
+@use '../variables' as vars;
+@use '../mixins' as mixins;
+
+// Basic form controls styling for CyberDuck
+form,
+.form-control,
+.form-select {
+  font-family: vars.$cyberduck-font-body;
+  background-color: var(--cyberduck-void-500);
+  color: var(--color-text-primary);
+  border: 1px solid var(--color-border-default);
+  border-radius: 6px;
+}
+
+.form-control:focus,
+.form-select:focus {
+  outline: none;
+  box-shadow:
+    0 0 10px rgb(var(--color-variant-primary, 255, 211, 0), 0.08),
+    0 0 18px var(--color-variant-primary);
+  border-color: var(--color-variant-primary);
+}
+
+label {
+  font-family: vars.$cyberduck-font-display;
+  font-variant-caps: small-caps;
+  color: var(--color-text-secondary);
+  font-size: 0.85rem;
+  letter-spacing: 0.04em;
+}
+
+// Apply chamfered container style to form-group wrapper only
+.form-group {
+  @include mixins.cd-chamfered-container;
+}