/* =========================================================
   Horus Design System — Colors & Type
   ---------------------------------------------------------
   Source palette (from brand brief):
     #000000  Black
     #FFFFFF  White
     #6366F1  Indigo (primary brand)
     #AFBEFF  Lavender (secondary / soft accent)
     #F2F8FF  Ice blue (page tint / surface)

   Typography:
     Display + UI: "DM Sans" (Google Fonts substitute — see README)
     Mono (data):  "JetBrains Mono"
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700;9..40,800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ---------- Brand palette ---------- */
  --horus-indigo:       #6366F1;   /* primary */
  --horus-indigo-700:   #4F52D8;   /* hover / pressed */
  --horus-indigo-800:   #3F42B8;   /* deep, on-light text accent */
  --horus-indigo-300:   #8E91F5;
  --horus-lavender:     #AFBEFF;   /* secondary accent */
  --horus-lavender-200: #C8D1FF;
  --horus-ice:          #F2F8FF;   /* page tint */
  --horus-ice-deep:     #E6EEFB;   /* divider on tinted bg */

  /* ---------- Neutrals (cool, finance-grade) ---------- */
  --neutral-0:    #FFFFFF;
  --neutral-50:   #F8FAFC;
  --neutral-100:  #F1F4F9;
  --neutral-200:  #E4E9F0;
  --neutral-300:  #CBD3E0;
  --neutral-400:  #9AA4B8;
  --neutral-500:  #6B7689;
  --neutral-600:  #4A5468;
  --neutral-700:  #313A4D;
  --neutral-800:  #1C2334;
  --neutral-900:  #0E1322;
  --neutral-1000: #000000;

  /* ---------- Semantic surfaces ---------- */
  --bg-page:        var(--horus-ice);     /* tinted ice blue */
  --bg-canvas:      var(--neutral-0);     /* card / panel */
  --bg-canvas-alt:  var(--neutral-50);    /* alt row */
  --bg-inverse:     var(--neutral-900);

  /* ---------- Foreground / text ---------- */
  --fg-1:        var(--neutral-900);   /* headings, hero text */
  --fg-2:        var(--neutral-700);   /* body */
  --fg-3:        var(--neutral-500);   /* muted / captions */
  --fg-4:        var(--neutral-400);   /* placeholder */
  --fg-on-brand: #FFFFFF;
  --fg-link:     var(--horus-indigo-700);

  /* ---------- Borders ---------- */
  --border-subtle:  var(--neutral-200);
  --border-default: var(--neutral-300);
  --border-strong:  var(--neutral-400);
  --border-brand:   var(--horus-indigo);

  /* ---------- Status (financial domain) ---------- */
  --positive:       #16A34A;   /* gains, on-budget */
  --positive-soft:  #DCFCE7;
  --negative:       #DC2626;   /* losses, over-budget */
  --negative-soft:  #FEE2E2;
  --warning:        #D97706;
  --warning-soft:   #FEF3C7;
  --info:           var(--horus-indigo);
  --info-soft:      var(--horus-ice);

  /* ---------- Spacing (4-pt) ---------- */
  --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;
  --space-24: 96px;

  /* ---------- Radii ---------- */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-2xl:  28px;
  --radius-pill: 999px;

  /* ---------- Shadows (soft, low-contrast — trustworthy) ---------- */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.06), 0 2px 4px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 12px 28px rgba(15, 23, 42, 0.08), 0 4px 8px rgba(15, 23, 42, 0.04);
  --shadow-xl: 0 24px 48px rgba(15, 23, 42, 0.10), 0 8px 16px rgba(15, 23, 42, 0.05);
  --shadow-brand: 0 8px 24px rgba(99, 102, 241, 0.25);
  --shadow-inner: inset 0 1px 2px rgba(15, 23, 42, 0.05);
  --ring-focus: 0 0 0 4px rgba(99, 102, 241, 0.18);

  /* ---------- Type scale ---------- */
  --font-display: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --text-2xs:   11px;
  --text-xs:    12px;
  --text-sm:    14px;
  --text-base:  16px;
  --text-md:    18px;
  --text-lg:    20px;
  --text-xl:    24px;
  --text-2xl:   30px;
  --text-3xl:   38px;
  --text-4xl:   48px;
  --text-5xl:   64px;
  --text-6xl:   80px;

  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  --tracking-tight:  -0.02em;
  --tracking-snug:   -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-black:    800;

  /* ---------- Motion ---------- */
  --ease-out:     cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast:   120ms;
  --duration-base:   200ms;
  --duration-slow:   320ms;
}

/* =========================================================
   Semantic type styles (use these directly)
   ========================================================= */

html { font-family: var(--font-body); color: var(--fg-1); background: var(--bg-page); }

body {
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.h-display {
  font-family: var(--font-display);
  font-size: clamp(48px, 6vw, var(--text-6xl));
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

.h1 {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

.h2 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg-1);
}

.h3 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg-1);
}

.h4 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--fg-1);
}

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--horus-indigo-700);
}

.lead {
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--fg-2);
}

.p {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--fg-2);
}

.small {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--fg-3);
}

.caption {
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  color: var(--fg-3);
  letter-spacing: 0.01em;
}

.mono, .num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

a { color: var(--fg-link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }