@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* Brand */
  --ao-green-950: #102c23;
  --ao-green-900: #173f31;
  --ao-green-850: #19362b;
  --ao-green-700: #356b55;
  --ao-green-200: #dfe9e2;
  --ao-green-100: #e8efe9;
  --ao-green-050: #f4f7f4;

  /* Amorino-support palette */
  --ao-olive: #7a7229;
  --ao-yellow: #f3c12c;
  --ao-buttercream: #ede2cd;
  --ao-blue: #6a95b1;
  --ao-navy: #133951;

  /* Neutrals */
  --ao-page: #f5f4f0;
  --ao-surface: #ffffff;
  --ao-surface-soft: #faf9f6;
  --ao-text: #1f2924;
  --ao-text-muted: #68736d;
  --ao-line: #dde2dd;
  --ao-line-strong: #c9d1cb;

  /* Semantic */
  --ao-success: #356b55;
  --ao-success-bg: #eaf2ed;
  --ao-warning: #806126;
  --ao-warning-bg: #f8f1dc;
  --ao-danger: #95504d;
  --ao-danger-bg: #f7eceb;
  --ao-info: #426a82;
  --ao-info-bg: #eaf1f5;

  /* Typography */
  --ao-font: "Inter", "Helvetica Neue", Arial, sans-serif;
  --ao-text-xs: 11px;
  --ao-text-sm: 12px;
  --ao-text-body: 14px;
  --ao-text-md: 16px;
  --ao-text-lg: 18px;
  --ao-text-xl: 24px;
  --ao-text-display: 30px;

  /* Spacing */
  --ao-space-1: 4px;
  --ao-space-2: 8px;
  --ao-space-3: 12px;
  --ao-space-4: 16px;
  --ao-space-5: 24px;
  --ao-space-6: 32px;
  --ao-space-7: 40px;

  /* Shape */
  --ao-radius-sm: 8px;
  --ao-radius-md: 12px;
  --ao-radius-lg: 16px;
  --ao-radius-pill: 999px;

  /* Effects */
  --ao-shadow-card: 0 1px 2px rgba(16,44,35,.03), 0 8px 26px rgba(16,44,35,.035);
  --ao-focus: 0 0 0 3px rgba(23,63,49,.10);

  /* Layout */
  --ao-sidebar-width: 224px;
  --ao-content-max: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--ao-font);
  font-size: var(--ao-text-body);
  line-height: 1.45;
  color: var(--ao-text);
  background: var(--ao-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, input, select, textarea { font: inherit; }
a { color: inherit; }

:focus-visible {
  outline: none;
  box-shadow: var(--ao-focus);
}

@media (max-width: 600px) {
  :root { --ao-text-display: 25px; }
}