/* src/index.css */
/* 1. settings */
/* src/settings/reset.css */
/* A very basic reset for demonstration purposes */
*,
*::before,
*::after {
  box-sizing: border-box;
}
body {
  margin: 0;
  font-family: var(--g-font-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img,
picture,
vide,
canvas,
svg {
  display: block;
  max-width: 100%;
}
input,
button,
textarea,
select {
  font: inherit;
}
p {
  overflow-wrap: break-word;
}
:root {
  --g-colors-primary: #0b76ff;
  --g-colors-accent: #ff7ab6;
  --g-colors-text: #111111;
  --g-colors-bg: #ffffff;
  --g-space-0: 0;
  --g-space-1: 0.25rem;
  --g-space-2: 0.5rem;
  --g-space-3: 0.75rem;
  --g-space-4: 1rem;
  --g-space-8: 2rem;
  --g-radius-sm: 4px;
  --g-radius-md: 8px;
  --g-radius-lg: 12px;
  --g-font-base: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}
[data-theme="light"] {
  --g-colors-bg: #ffffff;
  --g-colors-text: #111111;
  --g-colors-primary: #0b76ff;
}
/* 2. tools */
/* src/tools/functions.css */
/* Helper classes or mixins can go here. For now, it's empty. */
/* 3. generic */
/* src/generic/generic.css */
/* General, low-specificity rules that apply across the project. For now, it's empty. */
/* 4. elements */
/* src/elements/elements.css */
/* Styling for bare HTML elements. For now, it's empty. */
/* 5. objects */
/* src/objects/layout.css */
/* Layout primitives like containers, grids, etc. For now, it's empty. */
/* 6. components */
.btn {
  font-family: var(--g-font-base);
  background: var(--g-color-primary);
  color: var(--g-color-text-on-primary, #fff);
  padding: var(--g-space-2);
  border-radius: var(--g-radius-md);
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
  border: none;
  cursor: pointer;
}
.btn__icon { display: inline-block; }
.btn--ghost {
  background: transparent;
  border: 1px solid currentColor;
  color: var(--g-color-primary);
}
.card {
  background: var(--g-color-bg);
  color: var(--g-color-text);
  border-radius: var(--g-radius-md);
  padding: var(--g-space-4);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.card__header {
  font-size: 1.2em;
  margin-bottom: var(--g-space-2);
}
.card__body {
  line-height: 1.6;
}
.card--compact {
  padding: var(--g-space-2);
}
/* 7. utilities */
.g-m-0 { margin: var(--g-space-0); }
.g-m-1 { margin: var(--g-space-1); }
.g-m-2 { margin: var(--g-space-2); }
.g-m-3 { margin: var(--g-space-3); }
.g-m-4 { margin: var(--g-space-4); }
.g-m-8 { margin: var(--g-space-8); }
.g-p-0 { padding: var(--g-space-0); }
.g-p-1 { padding: var(--g-space-1); }
.g-p-2 { padding: var(--g-space-2); }
.g-p-3 { padding: var(--g-space-3); }
.g-p-4 { padding: var(--g-space-4); }
.g-p-8 { padding: var(--g-space-8); }
.g-text-primary { color: var(--g-colors-primary); }
.g-text-accent { color: var(--g-colors-accent); }
.g-text-text { color: var(--g-colors-text); }
.g-d-b { display: block; }
.g-d-ib { display: inline-block; }
.g-d-f { display: flex; }
.g-d-g { display: grid; }