/* ============================================================================
   Altus Ctrl — Color & Type Tokens
   Soft Minimalist rebrand. Deep emerald primary on off-white, with peach +
   sage + sky accents. Rounded sans typography (Outfit display / Inter text).
   ============================================================================ */

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

:root {
  /* ── Palette — Greens (primary) ───────────────────────────── */
  --emerald-900: #0E3A2A;  /* deepest — headings, logo on light */
  --emerald-800: #13513A;  /* primary brand green */
  --emerald-700: #1A6B4C;  /* hover / pressed primary */
  --emerald-600: #22885E;  /* active accents */
  --emerald-500: #3DA679;  /* bright actions, links */
  --emerald-400: #7BC8A0;  /* decorative */
  --emerald-200: #C7E6D4;  /* soft chip bg, rings */
  --emerald-100: #E3F1E8;  /* tinted card bg */
  --emerald-050: #F1F8F3;  /* lightest tint, bg washes */

  /* ── Palette — Neutrals (off-whites → slate) ──────────────── */
  --neutral-000: #FFFFFF;
  --neutral-050: #FBFAF7;  /* WARM off-white — app bg */
  --neutral-100: #F4F2EC;  /* panel bg, hover */
  --neutral-200: #E8E5DD;  /* borders, dividers */
  --neutral-300: #D3CEC2;  /* muted borders */
  --neutral-400: #A8A395;  /* secondary icons */
  --neutral-500: #7A7668;  /* tertiary text */
  --neutral-600: #575347;  /* secondary text */
  --neutral-700: #3A382F;  /* body text */
  --neutral-800: #23221C;  /* headings */
  --neutral-900: #111110;  /* ink */

  /* ── Accent — Peach (warmth, highlights) ─────────────────── */
  --peach-600: #D97757;
  --peach-500: #E89373;
  --peach-400: #F0AE95;
  --peach-200: #F9D9CA;
  --peach-100: #FCEBDF;

  /* ── Accent — Sage (calm, secondary data) ────────────────── */
  --sage-600: #7E9B82;
  --sage-500: #9CB3A0;
  --sage-400: #B8CABB;
  --sage-200: #DCE6DD;
  --sage-100: #EEF3EF;

  /* ── Accent — Sky (info, links) ──────────────────────────── */
  --sky-600: #4A8FB8;
  --sky-500: #6FA8CC;
  --sky-400: #9AC2DC;
  --sky-200: #CFE1EE;
  --sky-100: #E7F0F7;

  /* ── Semantic — status ───────────────────────────────────── */
  --success-600: #2E9266;
  --success-100: #E0F1E7;
  --warning-600: #C98B3A;
  --warning-100: #F8EBD4;
  --danger-600:  #C85440;
  --danger-100:  #F8DFD8;
  --info-600:    var(--sky-600);
  --info-100:    var(--sky-100);

  /* ── Semantic — surface + text roles ─────────────────────── */
  --bg-app:       var(--neutral-050);
  --bg-surface:   var(--neutral-000);
  --bg-panel:     var(--neutral-000);
  --bg-subtle:    var(--neutral-100);
  --bg-tint:      var(--emerald-050);
  --bg-inverse:   var(--emerald-900);

  --fg-primary:   var(--neutral-800);   /* headings + emphasized body */
  --fg-body:      var(--neutral-700);   /* default body text */
  --fg-secondary: var(--neutral-600);
  --fg-muted:     var(--neutral-500);
  --fg-disabled:  var(--neutral-400);
  --fg-inverse:   var(--neutral-050);
  --fg-accent:    var(--emerald-800);
  --fg-link:      var(--emerald-700);

  --border-subtle: var(--neutral-200);
  --border-default: var(--neutral-300);
  --border-strong: var(--neutral-400);
  --border-accent: var(--emerald-200);
  --ring-focus:   rgba(34,136,94,0.28);

  /* ── Typography — families ───────────────────────────────── */
  --font-display: 'Outfit', ui-sans-serif, system-ui, sans-serif;
  --font-sans:    'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ── Typography — scale (modular ~1.2) ───────────────────── */
  --text-2xs:   11px;
  --text-xs:    12px;
  --text-sm:    13px;
  --text-base:  15px;
  --text-md:    17px;
  --text-lg:    20px;
  --text-xl:    24px;
  --text-2xl:   30px;
  --text-3xl:   38px;
  --text-4xl:   48px;
  --text-5xl:   64px;

  --lh-tight:   1.15;
  --lh-snug:    1.3;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.08em;

  /* ── Radii ───────────────────────────────────────────────── */
  --radius-xs:  6px;
  --radius-sm:  10px;
  --radius-md:  14px;   /* default card */
  --radius-lg:  18px;
  --radius-xl:  24px;   /* hero / CTA / large surfaces */
  --radius-2xl: 32px;
  --radius-pill: 999px;

  /* ── Spacing — 4pt baseline ──────────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* ── Shadows — soft, warm, layered ───────────────────────── */
  --shadow-xs:  0 1px 2px rgba(24, 30, 22, 0.04);
  --shadow-sm:  0 1px 3px rgba(24, 30, 22, 0.05), 0 1px 2px rgba(24, 30, 22, 0.03);
  --shadow-md:  0 4px 12px rgba(24, 30, 22, 0.06), 0 2px 4px rgba(24, 30, 22, 0.04);
  --shadow-lg:  0 12px 32px rgba(24, 30, 22, 0.08), 0 4px 8px rgba(24, 30, 22, 0.04);
  --shadow-xl:  0 24px 64px rgba(24, 30, 22, 0.10), 0 8px 16px rgba(24, 30, 22, 0.05);
  --shadow-emerald: 0 8px 24px rgba(19, 81, 58, 0.18);
  --shadow-inset: inset 0 1px 2px rgba(24, 30, 22, 0.05);

  /* ── Motion ──────────────────────────────────────────────── */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized: cubic-bezier(0.3, 0, 0, 1.1);
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 280ms;
}

/* ============================================================================
   Semantic type classes — drop-in components
   ============================================================================ */

.ac-display,
h1.ac {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-4xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-primary);
}

.ac-h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-3xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-primary);
}

.ac-h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-2xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-primary);
}

.ac-h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-xl);
  line-height: var(--lh-snug);
  color: var(--fg-primary);
}

.ac-h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-md);
  line-height: var(--lh-snug);
  color: var(--fg-primary);
}

.ac-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: var(--lh-relaxed);
  color: var(--fg-body);
}

.ac-body-sm,
.ac-p-sm {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-sm);
  line-height: var(--lh-normal);
  color: var(--fg-body);
}

.ac-label {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.ac-caption {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-xs);
  line-height: var(--lh-normal);
  color: var(--fg-secondary);
}

.ac-mono,
code.ac {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--text-xs);
  color: var(--fg-secondary);
}

.ac-lead {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-md);
  line-height: var(--lh-relaxed);
  color: var(--fg-secondary);
}

/* Utility wrappers for cards/previews */
.ac-surface {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}