/*
 * design.css — Classless-first design system for small business apps
 * Version: 1.0
 *
 * USAGE HIERARCHY (for AI and humans):
 *   1. Write semantic HTML — it looks good by default
 *   2. Use a utility class (.stack, .row, .card, .container) for layout
 *   3. Override a custom property (--color-accent, etc.) for branding
 *
 * NAMING PATTERN: --{category}-{variant}
 *   colors:  --color-bg, --color-text, --color-accent, --color-border ...
 *   spacing: --space-xs, --space-sm, --space-md, --space-lg, --space-xl, --space-2xl
 *   type:    --font-base, --font-heading, --text-sm, --text-base, --text-lg ...
 *   radii:   --radius-sm, --radius-md, --radius-lg
 *   shadows: --shadow-sm, --shadow-md
 *
 * CLASSES (complete list):
 *   .container, .stack, .row, .card, .muted,
 *   .badge, .badge-success, .badge-warning, .badge-danger, .badge-neutral,
 *   .primary (for buttons), .table-wrap (responsive tables)
 */

/* --- Font: DM Sans for headings (clean geometric, 500+700) --- */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@500;700&display=swap');

/* ============================================================
   TOKENS — Light mode (default)
   ============================================================ */
:root {
  /* -- Primitive palette -- */
  --gray-50:  #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;

  --blue-100: #dbeafe;
  --blue-500: #2563eb;
  --blue-600: #1d4ed8;

  --green-100: #dcfce7;
  --green-600: #16a34a;
  --green-900: #14532d;

  --amber-100: #fef3c7;
  --amber-600: #d97706;
  --amber-900: #78350f;

  --red-100:   #fee2e2;
  --red-600:   #dc2626;
  --red-900:   #7f1d1d;

  /* -- Semantic colors -- */
  --color-bg:           #ffffff;
  --color-bg-raised:    var(--gray-50);
  --color-text:         var(--gray-900);
  --color-text-muted:   var(--gray-500);
  --color-border:       var(--gray-200);

  --color-accent:        var(--blue-500);
  --color-accent-hover:  var(--blue-600);
  --color-accent-subtle: var(--blue-100);

  --color-success:       var(--green-600);
  --color-success-bg:    var(--green-100);
  --color-success-text:  var(--green-900);
  --color-warning:       var(--amber-600);
  --color-warning-bg:    var(--amber-100);
  --color-warning-text:  var(--amber-900);
  --color-danger:        var(--red-600);
  --color-danger-bg:     var(--red-100);
  --color-danger-text:   var(--red-900);

  /* -- Spacing scale -- */
  --space-xs:  0.25rem;
  --space-sm:  0.5rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-2xl: 3rem;

  /* -- Typography -- */
  --font-base:    system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-heading: "DM Sans", var(--font-base);
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  2rem;
  --line-height: 1.6;

  /* -- Radii -- */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;

  /* -- Shadows -- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);

  /* -- Focus -- */
  --focus-ring: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-accent);
}

/* ============================================================
   TOKENS — Dark mode
   ============================================================ */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg:           var(--gray-900);
    --color-bg-raised:    var(--gray-800);
    --color-text:         var(--gray-100);
    --color-text-muted:   var(--gray-400);
    --color-border:       var(--gray-700);

    --color-accent:        #3b82f6;
    --color-accent-hover:  #60a5fa;
    --color-accent-subtle: rgba(59, 130, 246, 0.15);

    --color-success-bg:    rgba(22, 163, 74, 0.15);
    --color-success-text:  #4ade80;
    --color-warning-bg:    rgba(217, 119, 6, 0.15);
    --color-warning-text:  #fbbf24;
    --color-danger-bg:     rgba(220, 38, 38, 0.15);
    --color-danger-text:   #f87171;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
  }
}

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

body {
  margin: 0;
  font-family: var(--font-base);
  font-size: var(--text-base);
  line-height: var(--line-height);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

/* ============================================================
   TYPOGRAPHY — h1-h4, p, small, a, hr
   ============================================================ */
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 var(--space-sm);
  color: var(--color-text);
}
h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }

p  { margin: 0 0 var(--space-md); }
small { font-size: var(--text-sm); }

a { color: var(--color-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--space-lg) 0;
}

/* ============================================================
   NAV — top bar with app name + links
   ============================================================ */
nav {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-lg);
  background: var(--color-bg-raised);
  border-bottom: 1px solid var(--color-border);
}
nav strong {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 700;
  margin-right: auto;
}
nav a {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: 500;
}
nav a:hover { color: var(--color-text); text-decoration: none; }

/* ============================================================
   BUTTONS — default, .primary, :disabled
   ============================================================ */
button, .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1.25;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  color: var(--color-text);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
button:hover { background: var(--color-bg-raised); border-color: var(--color-text-muted); }
button:focus-visible { outline: none; box-shadow: var(--focus-ring); }

button.primary, .button.primary {
  background: var(--color-accent);
  color: #fff;
  border-color: var(--color-accent);
}
button.primary:hover {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
}

button:disabled, .button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* ============================================================
   FORMS — inputs, selects, textareas, checkboxes, labels, fieldsets
   ============================================================ */
label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 500;
  margin-bottom: var(--space-xs);
}

input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  display: block;
  width: 100%;
  padding: var(--space-sm);
  font: inherit;
  font-size: var(--text-base);
  color: var(--color-text);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color 0.15s;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: var(--focus-ring);
}
input:disabled, select:disabled, textarea:disabled {
  background: var(--color-bg-raised);
  opacity: 0.6;
  cursor: not-allowed;
}
input:not(:placeholder-shown):invalid,
textarea:not(:placeholder-shown):invalid {
  border-color: var(--color-danger);
}

fieldset {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin: 0 0 var(--space-md);
}
legend {
  font-family: var(--font-heading);
  font-weight: 500;
  padding: 0 var(--space-xs);
}

textarea { resize: vertical; min-height: 5rem; }
select { appearance: auto; }

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--color-accent);
  margin-right: var(--space-xs);
  vertical-align: middle;
}

/* ============================================================
   TABLES — striped rows, sticky header, hover
   ============================================================ */
table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
th, td {
  text-align: left;
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--color-border);
}
th {
  font-family: var(--font-heading);
  font-weight: 500;
  color: var(--color-text-muted);
  background: var(--color-bg-raised);
  position: sticky;
  top: 0;
  z-index: 1;
}
tbody tr:nth-child(even) { background: var(--color-bg-raised); }
tbody tr:hover { background: var(--color-accent-subtle); }

/* ============================================================
   UTILITIES — .container, .stack, .row, .card, .muted, .badge
   ============================================================ */

/* -- Layout -- */
.container {
  max-width: 64rem;
  margin-inline: auto;
  padding-inline: var(--space-lg);
}

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--gap, var(--space-md));
}

.row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap, var(--space-md));
  align-items: flex-start;
}

.card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow-sm);
}

/* -- Text -- */
.muted { color: var(--color-text-muted); }

/* -- Status badges -- */
.badge {
  display: inline-block;
  padding: 0.125rem var(--space-sm);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.5;
  border-radius: 999px;
  white-space: nowrap;
  background: var(--color-accent-subtle);
  color: var(--color-accent);
}
.badge-success { background: var(--color-success-bg); color: var(--color-success-text); }
.badge-warning { background: var(--color-warning-bg); color: var(--color-warning-text); }
.badge-danger  { background: var(--color-danger-bg);  color: var(--color-danger-text); }
.badge-neutral { background: var(--color-bg-raised);  color: var(--color-text-muted); }

/* -- Responsive table wrapper -- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 640px) {
  .row { flex-direction: column; }
  nav { flex-wrap: wrap; }
  nav strong { width: 100%; }
}