/* ============================================================================
   MarketCanvas Design Tokens — "Midnight Indigo"
   Single source of truth for color, type, spacing, radius, and elevation.
   Load this file FIRST on every page. See REDESIGN_PLAN.md.
   ============================================================================ */

:root {
  /* ---- Brand ---- */
  --mc-accent:        #4F46E5;   /* indigo — primary actions, links */
  --mc-accent-hover:  #6366F1;
  --mc-accent-press:  #4338CA;
  --mc-accent-soft:   rgba(79, 70, 229, 0.08);   /* pill/hover washes */
  --mc-violet:        #7C3AED;
  --mc-grad:          linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%);

  /* ---- Semantic (NOT the accent) ---- */
  --mc-green:         #10B981;   /* money paid, verified, success */
  --mc-green-soft:    rgba(16, 185, 129, 0.12);
  --mc-amber:         #F59E0B;   /* warning */
  --mc-red:           #EF4444;   /* error / loss */
  --mc-red-soft:      rgba(239, 68, 68, 0.10);

  /* ---- Neutrals (cool bias toward the accent) ---- */
  --mc-ink:           #0B1220;   /* primary text / near-black navy */
  --mc-ink-soft:      #1B2537;
  --mc-muted:         #56657F;   /* secondary text — ONE grey, not five */
  --mc-muted-2:       #8492AC;   /* tertiary / captions */
  --mc-bg:            #F7F9FC;   /* page background */
  --mc-surface:       #FFFFFF;   /* cards */
  --mc-surface-2:     #F1F4FA;   /* insets, subtle fills */
  --mc-border:        #E2E8F0;
  --mc-border-strong: #CBD5E1;
  --mc-focus:         #6366F1;   /* focus ring */

  /* ---- Dark canvas ground (the tool) ---- */
  --mc-dark-bg:       linear-gradient(160deg, #0B1020 0%, #1A1F3A 55%, #2A1E55 100%);
  --mc-dark-surface:  #0F1424;
  --mc-dark-surface2: #151B2E;
  --mc-dark-border:   #232B42;
  --mc-dark-ink:      #EAF0FA;
  --mc-dark-muted:    #97A4BD;
  --mc-dark-accent:   #7C82F5;   /* accent lightened for dark ground */
  --mc-dark-accent-2: #A5B4FC;   /* lightest accent — text/highlights on dark */
  --mc-glass:         rgba(255, 255, 255, 0.06);
  --mc-glass-strong:  rgba(255, 255, 255, 0.10);
  --mc-glass-border:  rgba(255, 255, 255, 0.09);

  /* ---- Type ---- */
  --mc-font: 'Inter', ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mc-mono: ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  --fs-display: clamp(34px, 5vw, 58px);
  --fs-h1:      clamp(28px, 3.4vw, 40px);
  --fs-h2:      clamp(22px, 2.4vw, 30px);
  --fs-h3:      20px;
  --fs-body:    16px;
  --fs-sm:      14px;
  --fs-label:   12px;

  /* ---- Spacing (8pt grid) ---- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-6: 24px; --sp-8: 32px; --sp-12: 48px; --sp-16: 64px; --sp-24: 96px;

  /* ---- Radius ---- */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-pill: 999px;

  /* ---- Elevation (layered, not one flat blur) ---- */
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .05);
  --shadow-md: 0 4px 12px rgba(16, 24, 40, .08);
  --shadow-lg: 0 18px 48px rgba(11, 18, 32, .16);
}

/* ============================================================================
   Base type ramp — pages inherit this unless they deliberately override.
   ============================================================================ */

body {
  font-family: var(--mc-font);
}

h1, h2, h3 {
  letter-spacing: -0.02em;
  line-height: 1.15;
  text-wrap: balance;
}

/* Money, prices, stats — always tabular so columns line up. */
.mc-tabular {
  font-variant-numeric: tabular-nums;
}

/* Uppercase section labels / eyebrows. */
.mc-label {
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Visible keyboard focus everywhere — a trust signal, not a checkbox. */
:focus-visible {
  outline: 2px solid var(--mc-focus);
  outline-offset: 2px;
}