/* =============================================================
   Maatitil Design System — Colors & Type
   Drop this stylesheet into any HTML file to inherit the brand.
   ============================================================= */

/* Geist Sans + Geist Mono via Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500;600;700&display=swap');

:root {
  /* ---------- Color: surfaces ---------- */
  --bg:            #0A0A0B;   /* page background */
  --bg-elevated:   #111112;   /* card / surface background */
  --bg-card:       #111113;   /* alternate card body (dashboard) */
  --bg-glass:      rgba(22, 22, 24, 0.95);   /* "glass" utility (opaque, perf) */
  --bg-canvas:     #0D0D0E;   /* strategy builder canvas */
  --bg-overlay:    rgba(0, 0, 0, 0.60);      /* mobile drawer scrim */
  --bg-nav-scroll: rgba(0, 0, 0, 0.80);      /* scrolled navbar */

  /* ---------- Color: foreground / text ---------- */
  --fg:            #F8FAFC;   /* primary near-white */
  --fg-1:          #F8FAFC;   /* same — alias for clarity */
  --fg-2:          #E5E7EB;   /* gray-200 — heading body */
  --fg-3:          #9CA3AF;   /* gray-400 — body copy */
  --fg-4:          #6B7280;   /* gray-500 — secondary / labels */
  --fg-5:          #4B5563;   /* gray-600 — fine print / risk lines */
  --fg-mute:       #27272A;   /* zinc-800 — disabled */

  /* ---------- Color: brand & semantic ---------- */
  --primary:       #10B981;   /* emerald-500 — brand */
  --primary-hover: #059669;   /* emerald-600 — hover */
  --primary-soft:  rgba(16, 185, 129, 0.10);
  --primary-ring:  rgba(16, 185, 129, 0.30);
  --primary-glow:  rgba(16, 185, 129, 0.20);

  --accent-cyan:   #22D3EE;   /* used in dashboard greeting gradient */

  --positive:      #10B981;   /* P&L positive, online, success */
  --negative:      #EF4444;   /* red-500 — loss, risk, signout */
  --warning:       #F59E0B;   /* amber-500 — 70%+ resource usage */
  --critical:      #EF4444;   /* same as negative */
  --neutral:       #6B7280;   /* offline, idle */

  /* ---------- Color: strategy builder block palette ---------- */
  /* These are ONLY used inside the no-code builder canvas */
  --blk-indicator-bg:    rgba(59, 130, 246, 0.10);   /* blue-500 / 10 */
  --blk-indicator-border:rgba(59, 130, 246, 0.20);
  --blk-indicator-fg:    #60A5FA;                    /* blue-400 */
  --blk-indicator-solid: #3B82F6;                    /* blue-500 */

  --blk-condition-bg:    #6B21A8;                    /* purple-800 */
  --blk-condition-bg-on: #7E22CE;                    /* purple-700 */
  --blk-condition-border:#7E22CE;
  --blk-condition-border-on: #A855F7;                /* purple-500 */
  --blk-condition-fg:    #E9D5FF;                    /* purple-200 */

  --blk-match-bg:        rgba(16, 185, 129, 0.10);
  --blk-match-border:    rgba(16, 185, 129, 0.20);
  --blk-match-fg:        #10B981;

  --blk-action-bg:       rgba(249, 115, 22, 0.10);   /* orange-500 / 10 */
  --blk-action-border:   rgba(249, 115, 22, 0.20);
  --blk-action-fg:       #FB923C;                    /* orange-400 */
  --blk-action-solid:    #F97316;                    /* orange-500 */

  --blk-primitive-bg:    #1F2937;                    /* gray-800 */
  --blk-primitive-bg-on: #374151;                    /* gray-700 */
  --blk-primitive-border:#374151;
  --blk-primitive-border-on: #6B7280;                /* gray-500 */

  --handle-output: #10B981;   /* emerald — source/output handle */
  --handle-input:  #FBBF24;   /* gold — target/input handle */

  /* ---------- Color: borders ---------- */
  --border-1:      rgba(255, 255, 255, 0.05);   /* hairline */
  --border-2:      rgba(255, 255, 255, 0.10);   /* default card border */
  --border-3:      rgba(255, 255, 255, 0.12);   /* slightly stronger */
  --border-hover:  rgba(16, 185, 129, 0.30);    /* card hover */
  --border-block:  #374151;                     /* strategy block 2px border */

  /* ---------- Selection ---------- */
  --selection-bg:  rgba(16, 185, 129, 0.30);
  --selection-fg:  #10B981;

  /* ---------- Spacing scale (Tailwind alignment) ---------- */
  --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;
  --space-32: 128px;

  /* ---------- Radii ---------- */
  --radius-sm:    6px;     /* inline pills, code chips */
  --radius-md:    8px;     /* small buttons, builder blocks */
  --radius-lg:    12px;    /* stat tiles, builder selects */
  --radius-xl:    16px;    /* cards (default) */
  --radius-2xl:   24px;    /* hero / glass / legal callouts */
  --radius-full:  9999px;  /* CAPSULE — all primary CTAs */

  /* ---------- Shadows ---------- */
  --shadow-card:        0 4px 16px -4px rgba(0, 0, 0, 0.40);
  --shadow-card-hover:  0 4px 16px -4px rgba(0, 0, 0, 0.40), 0 0 0 1px var(--border-hover);
  --shadow-cta-emerald: 0 0 20px rgba(16, 185, 129, 0.20);
  --shadow-2xl:         0 25px 50px -12px rgba(0, 0, 0, 0.50);
  --shadow-handle-out:  0 2px 8px rgba(16, 185, 129, 0.30);
  --shadow-handle-in:   0 2px 8px rgba(251, 191, 36, 0.30);
  --shadow-block-on:    0 0 24px rgba(168, 85, 247, 0.40);   /* purple block when connected */

  /* ---------- Atmospheric glows (radial gradients) ---------- */
  --glow-hero:  radial-gradient(circle at 50% 0%, rgba(16, 185, 129, 0.08) 0%, transparent 70%); /* @kind color */
  --glow-cta:   radial-gradient(circle at 50% 100%, rgba(16, 185, 129, 0.10) 0%, transparent 70%); /* @kind color */
  --glow-risk:  radial-gradient(circle, rgba(239, 68, 68, 0.05) 0%, transparent 70%); /* @kind color */

  /* ---------- Typography ---------- */
  --font-sans: 'Geist', 'Outfit', 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Type scale (px) */
  --t-display:   72px;   /* hero H1 desktop (md:text-7xl) */
  --t-display-m: 48px;   /* hero H1 mobile (text-5xl) */
  --t-h1:        48px;   /* secondary heroes (text-5xl) */
  --t-h2:        32px;   /* section headers (text-3xl/4xl) */
  --t-h3:        24px;   /* subhead / large feature titles */
  --t-h4:        20px;   /* card titles / sidebar brand */
  --t-h5:        18px;   /* small section labels */
  --t-body:      16px;   /* default body */
  --t-body-sm:   14px;   /* dense body, nav, button label */
  --t-caption:   12px;   /* labels, footer items */
  --t-micro:     10px;   /* eyebrows, risk lines, footer copyright */

  /* Tracking */
  --track-tight:    -0.025em;
  --track-tighter:  -0.04em;
  --track-normal:   0; /* @kind spacing */
  --track-wide:     0.05em;
  --track-eyebrow:  0.2em;
  --track-eyebrow-strong: 0.3em;

  /* Weights */
  --w-regular:  400; /* @kind font */
  --w-medium:   500; /* @kind font */
  --w-semibold: 600; /* @kind font */
  --w-bold:     700; /* @kind font */
}

/* =============================================================
   Semantic / element-level styles
   ============================================================= */

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-feature-settings: 'cv11', 'ss01', 'ss03';
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection { background: var(--selection-bg); color: var(--selection-fg); }

/* Headings */
h1, .h1 {
  font-family: var(--font-sans);
  font-size: clamp(var(--t-display-m), 6vw, var(--t-display));
  font-weight: var(--w-bold);
  letter-spacing: var(--track-tight);
  line-height: 1.05;
  color: var(--fg);
}
h2, .h2 {
  font-family: var(--font-sans);
  font-size: var(--t-h2);
  font-weight: var(--w-bold);
  letter-spacing: var(--track-tight);
  line-height: 1.15;
}
h3, .h3 {
  font-family: var(--font-sans);
  font-size: var(--t-h3);
  font-weight: var(--w-bold);
  line-height: 1.25;
}
h4, .h4 {
  font-family: var(--font-sans);
  font-size: var(--t-h4);
  font-weight: var(--w-bold);
  line-height: 1.3;
}

/* Body */
p, .p {
  font-size: var(--t-body);
  font-weight: var(--w-regular);
  line-height: 1.6;
  color: var(--fg-3);
}

/* The Maatitil signature: gradient hero text */
.display-gradient {
  background: linear-gradient(to right, #FFFFFF 0%, #E5E7EB 50%, #6B7280 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.display-gradient-emerald {
  background: linear-gradient(to right, #34D399 0%, #22D3EE 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Eyebrow — the small all-caps tracked label used everywhere */
.eyebrow {
  font-size: var(--t-micro);
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: var(--track-eyebrow);
  color: var(--fg-4);
}
.eyebrow-emerald {
  color: var(--primary);
  letter-spacing: var(--track-eyebrow-strong);
}

/* Risk-line — repeats throughout; treat as a design element */
.risk-line {
  font-size: var(--t-micro);
  font-weight: var(--w-medium);
  text-transform: uppercase;
  letter-spacing: var(--track-eyebrow);
  color: var(--fg-5);
}

/* Mono tags — those tiny "AES-256" / "NSE / BSE" capsules */
.mono-tag {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  font-weight: var(--w-bold);
  letter-spacing: -0.02em;
  text-transform: uppercase;
  border: 1px solid var(--border-2);
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  color: var(--fg-3);
  white-space: nowrap;
}

code, .code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  color: var(--primary);
  background: rgba(0, 0, 0, 0.4);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-2);
}

/* =============================================================
   Component bases
   ============================================================= */

.card {
  background: var(--bg-card);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
}
.card-glass {
  background: var(--bg-glass);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-2xl);
}
.card-hover {
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.card-hover:hover {
  border-color: var(--border-hover);
  box-shadow: var(--shadow-card);
  transform: translateY(-1px);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 32px;
  border-radius: var(--radius-full);
  font-family: var(--font-sans);
  font-size: var(--t-body-sm);
  font-weight: var(--w-bold);
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid transparent;
  white-space: nowrap;
}
.btn-primary {
  background: var(--primary);
  color: #000;
  box-shadow: var(--shadow-cta-emerald);
}
.btn-primary:hover { background: var(--primary-hover); }

.btn-white {
  background: #FFFFFF;
  color: #000;
}
.btn-white:hover { transform: scale(1.05); }

.btn-ghost {
  background: rgba(255, 255, 255, 0.05);
  color: var(--fg);
  border: 1px solid var(--border-2);
}
.btn-ghost:hover { background: rgba(255, 255, 255, 0.10); }

/* Stat tile — used on dashboard and trust bars */
.stat {
  background: var(--bg-card);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
}
.stat-value {
  font-size: var(--t-h2);
  font-weight: var(--w-bold);
  letter-spacing: var(--track-tight);
  color: var(--fg);
}
.stat-label {
  font-size: var(--t-body-sm);
  font-weight: var(--w-medium);
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  color: var(--fg-4);
}