/* ============================================================================
   AxonML Design System — Colors & Typography
   ----------------------------------------------------------------------------
   Extracted from: crates/axonml-dashboard/assets/styles.css (v0.6.1)
   Theme: "NexusForge" — cream/teal/terracotta on off-white
   ============================================================================ */

:root {
  /* ============================================================
     COLORS — Backgrounds
     ============================================================ */
  --bg-primary:         #ffffff;   /* pure white — cards, modals */
  --bg-secondary:       #faf9f6;   /* bone/cream — page background */
  --bg-tertiary:        #f5f5f4;   /* warm stone — inset panels */
  --bg-cream:           #f5ebe0;   /* warm cream — legacy card fill */
  --bg-highlight:       #fff7ed;   /* peach tint — hover rows */
  --bg-teal:            #f0fdfa;   /* teal-50 — nav active, pills */
  --bg-slate:           #f3f4f6;   /* cool grey — inputs, code */
  --bg-cream-light:     #faf7f2;

  /* ============================================================
     COLORS — Primary — ultralight terracotta + charcoal
     ============================================================ */
  --primary:            #C0582B;   /* warm terracotta — brand accent */
  --primary-dark:       #9E4420;   /* darker terracotta — hover */
  --primary-light:      #F5D6C6;   /* ultralight terracotta — tints */
  --primary-ultra:      #FDF5F0;   /* barely-there terracotta bg */
  --primary-rgb:        192, 88, 43;

  /* ============================================================
     COLORS — Secondary & Accent
     ============================================================ */
  --terracotta:         #c4a484;   /* warm neutral tan */
  --terracotta-dark:    #a08060;
  --terracotta-light:   #e8d4c4;
  --terracotta-bold:    #e07a5f;   /* true terracotta accent */
  --orange:             #f97316;   /* orange-500 */
  --orange-light:       #fed7aa;
  --indigo:             #4f46e5;   /* indigo-600 — chart accent */
  --indigo-light:       #c7d2fe;
  --indigo-ultra:       #eef2ff;
  --cyan:               #06b6d4;   /* used in hero gradient */

  /* ============================================================
     COLORS — Semantic / Status
     ============================================================ */
  --success:            #10b981;   /* emerald-500 — completed */
  --success-bg:         #f0fdf4;
  --success-alt:        #22c55e;   /* green-500 — used in status */
  --warning:            #f59e0b;   /* amber-500 */
  --warning-bg:         #fffbeb;
  --error:              #ef4444;   /* red-500 */
  --error-bg:           #fef2f2;
  --danger:             #ef4444;   /* alias of error */
  --info:               #3b82f6;   /* blue-500 */
  --info-bg:            #eff6ff;

  /* ============================================================
     COLORS — Text
     ============================================================ */
  --text-primary:       #111827;   /* gray-900 — body, headings */
  --text-secondary:     #6b7280;   /* gray-500 — supporting */
  --text-muted:         #9ca3af;   /* gray-400 — hints, labels */
  --text-light:         #fffdf7;   /* near-white on dark */
  --text-on-primary:    #ffffff;   /* white on teal */

  /* ============================================================
     COLORS — Borders
     ============================================================ */
  --border:             #e5e7eb;   /* default hairline */
  --border-strong:      #d1d5db;
  --border-teal:        #F5D6C6;
  --border-cream:       #f5ebe0;

  /* ============================================================
     COLORS — Utility
     ============================================================ */
  --white:              #ffffff;
  --black:              #111827;
  --hover-bg:           #f5f5f4;
  --code-bg:            #1e1e1e;

  /* ============================================================
     TYPOGRAPHY — Families
     ============================================================ */
  --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                Roboto, sans-serif;
  --font-mono:  'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

  /* ============================================================
     TYPOGRAPHY — Scale (px; AxonML uses px throughout)
     ============================================================ */
  --fs-xs:      11px;  /* micro — eyebrow, status badge */
  --fs-sm:      12px;  /* small — meta, badges */
  --fs-base:    14px;  /* body — default text */
  --fs-md:      15px;  /* body + — subtitles */
  --fs-lg:      16px;  /* card titles, btn-lg */
  --fs-xl:      18px;  /* section titles */
  --fs-2xl:     20px;  /* feature titles */
  --fs-3xl:     24px;  /* auth title, card h2 */
  --fs-4xl:     28px;  /* page title */
  --fs-5xl:     36px;  /* section h2, stat-value */
  --fs-6xl:     48px;  /* stat-value hero */
  --fs-7xl:     56px;  /* hero-title */

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  --fw-black:   800;   /* hero, page-title */

  --lh-tight:   1.1;   /* large display */
  --lh-snug:    1.2;   /* stat values */
  --lh-normal:  1.5;   /* body */
  --lh-relaxed: 1.6;   /* feature paragraphs */
  --lh-loose:   1.7;   /* hero subtitle */

  --ls-tight:   -0.01em;
  --ls-normal:   0em;
  --ls-wide:    0.05em;   /* eyebrow / uppercase labels */
  --ls-wider:   0.5px;    /* status badges */

  /* ============================================================
     SPACING (8px base, with 4px half-step)
     ============================================================ */
  --s-0:  0;
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-7:  32px;
  --s-8:  40px;
  --s-9:  48px;
  --s-10: 64px;
  --s-11: 80px;

  /* ============================================================
     RADII — the AxonML corner rhythm (soft, never sharp)
     ============================================================ */
  --radius-xs:  4px;    /* code chips, checkbox */
  --radius-sm:  6px;    /* status badge */
  --radius-md:  8px;    /* inputs, buttons, nav items */
  --radius-lg:  12px;   /* cards, stat cards, toasts */
  --radius-xl:  14px;   /* stats icon tile */
  --radius-2xl: 16px;   /* dashboard cards, run cards, modals */
  --radius-pill: 20px;  /* badges */
  --radius-round: 50%;  /* avatars, logo nodes */

  /* ============================================================
     SHADOWS
     ============================================================ */
  --shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md:   0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg:   0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.1);         /* hover lift */
  --shadow-xl:   0 12px 24px rgba(0, 0, 0, 0.15);       /* feature cards */
  --shadow-2xl:  0 20px 40px rgba(0, 0, 0, 0.2);        /* auth, hero */
  --shadow-primary: 0 2px 8px rgba(192, 88, 43, 0.2);
  --shadow-primary-hover: 0 4px 12px rgba(192, 88, 43, 0.25);
  --focus-ring:  0 0 0 3px rgba(20, 184, 166, 0.1);

  /* ============================================================
     MOTION
     ============================================================ */
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);  /* "ease" */
  --dur-fast:   0.15s;   /* nav items, hover */
  --dur-base:   0.2s;    /* buttons, cards */
  --dur-slow:   0.25s;   /* stat cards */
  --dur-slower: 0.3s;    /* fadeIn, modal, progress */

  /* ============================================================
     LAYOUT
     ============================================================ */
  --sidebar-w:      240px;
  --navbar-h:       64px;
  --container-max:  1200px;
  --container-wide: 1400px;
}

/* ============================================================================
   SEMANTIC TYPE ELEMENTS — Use these on real HTML tags
   ============================================================================ */

.ds-reset * { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  font-family: var(--font-sans);
  color: var(--text-primary);
  background: var(--bg-secondary);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Display — hero headline */
.h-display {
  font-size: var(--fs-7xl);
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--text-primary);
}

/* Page title (h1 in app chrome) */
.h1, h1.ds {
  font-size: var(--fs-4xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--text-primary);
}

/* Section heading */
.h2, h2.ds {
  font-size: var(--fs-5xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--text-primary);
}

/* Card title / in-page h2 */
.h3, h3.ds {
  font-size: var(--fs-xl);
  font-weight: var(--fw-semi);
  color: var(--text-primary);
}

/* Feature/subsection title */
.h4, h4.ds {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-semi);
  color: var(--text-primary);
}

/* Small card title */
.h5, h5.ds {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semi);
  color: var(--text-primary);
}

/* Body */
.p, p.ds {
  font-size: var(--fs-base);
  color: var(--text-primary);
  line-height: var(--lh-normal);
}

.p-lead {
  font-size: var(--fs-xl);
  color: var(--text-secondary);
  line-height: var(--lh-loose);
}

.p-muted {
  font-size: var(--fs-base);
  color: var(--text-secondary);
}

.p-small {
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

/* Eyebrow label — uppercase caps above sections / section headers */
.eyebrow {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--text-muted);
}

/* Code chips (inline) */
code, .code {
  font-family: var(--font-mono);
  background: var(--bg-slate);
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  font-size: 0.875em;
  color: var(--text-primary);
}

/* Code blocks (dark) */
pre.code-block {
  font-family: var(--font-mono);
  background: var(--code-bg);
  color: #e5e7eb;
  padding: 16px 20px;
  border-radius: var(--radius-lg);
  font-size: 13px;
  line-height: 1.6;
  overflow-x: auto;
}

/* Monospace numeric value (metrics) */
.metric-num {
  font-family: var(--font-mono);
  font-size: var(--fs-xl);
  font-weight: var(--fw-semi);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

/* Gradient text — reserved for hero headline accents */
.gradient-text {
  background: linear-gradient(135deg, var(--primary) 0%, var(--cyan) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Links */
a.ds { color: var(--primary); text-decoration: none; }
a.ds:hover { color: var(--primary-dark); text-decoration: underline; }