/*
 * HobbyIQ Design System — Design Tokens
 * Master Rules Document: docs/UI-MODERNIZATION-MASTER-RULES.md
 * DO NOT deviate from these values without explicit Mark approval.
 *
 * FONT: Inter — loaded via Google Fonts (preconnect + display=swap prevents FOUT)
 * Applied at :root so it cascades to every element.
 */

/* ── Inter Font ── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');

/* ── Design Tokens ── */
:root {
  /* Background Colors */
  --color-bg-primary:     #0F1117;
  --color-bg-secondary:   #161B22;
  --color-bg-card:        #1C2128;
  --color-bg-elevated:    #21262D;
  --color-border:         #30363D;
  --color-border-subtle:  #21262D;

  /* Semantic Colors */
  --color-success:        #22C55E;   /* best outcome, MCP wins, positive gain, upward trend */
  --color-danger:         #EF4444;   /* loss framing, errors, downward trends */
  --color-warning:        #F59E0B;   /* caution, uncertainty, neutral-close signals */
  --color-info:           #3B82F6;   /* informational, secondary data, links */
  --color-muted:          #6B7280;   /* labels, descriptions, footnotes, inactive */
  --color-text-primary:   #F0F6FC;
  --color-text-secondary: #8B949E;

  /* Semantic color alpha variants (for backgrounds) */
  --color-success-alpha:  rgba(34, 197, 94, 0.12);
  --color-danger-alpha:   rgba(239, 68, 68, 0.12);
  --color-warning-alpha:  rgba(245, 158, 11, 0.12);
  --color-info-alpha:     rgba(59, 130, 246, 0.12);

  /* Typography */
  --font-family:          'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --font-size-xl:         32px;   /* price figures, primary net payout, portfolio total value */
  --font-size-lg:         24px;   /* section totals, card-level key figures */
  --font-size-md:         20px;   /* secondary figures, comparison deltas */
  --font-size-base:       16px;   /* body text, card titles */
  --font-size-sm:         14px;   /* labels, descriptions, supporting copy */
  --font-size-xs:         12px;   /* attribution, footnotes, timestamps */

  --font-weight-bold:     700;    /* all price figures and primary numbers */
  --font-weight-semibold: 600;    /* section headers, card titles */
  --font-weight-regular:  400;    /* all descriptive text */

  /* Spacing — 8px grid */
  --space-1:  8px;
  --space-2:  16px;
  --space-3:  24px;
  --space-4:  32px;
  --space-6:  48px;
  --space-8:  64px;

  /* Border Radius */
  --radius-sm:    4px;      /* badges, tags, pills */
  --radius-md:    8px;      /* cards, inputs, buttons */
  --radius-lg:    12px;     /* panels, modals */
  --radius-full:  9999px;   /* circular badges, avatars */

  /* Layout Constraints */
  --max-width-page:         1280px;
  --max-width-content:      720px;
  --padding-page-mobile:    16px;
  --padding-page-desktop:   32px;

  /* ─────────────────────────────────────────────────────────
   * LEGACY VARIABLE ALIASES
   * These map old per-page variable names to the new tokens.
   * Kept for backward compatibility while full migration
   * is completed page-by-page. Remove once all pages are
   * updated.
   * ───────────────────────────────────────────────────────── */

  /* Old index.html / changelog.html / hobby-101 names */
  --bg-deep:          var(--color-bg-primary);
  --bg-card:          var(--color-bg-card);
  --bg-elevated:      var(--color-bg-elevated);
  --accent:           var(--color-success);
  --accent-dim:       var(--color-success-alpha);
  --accent-glow:      rgba(34, 197, 94, 0.22);
  --gold:             #F5C542;            /* kept verbatim — no token equivalent */
  --gold-dim:         rgba(245, 197, 66, 0.10);
  --red:              var(--color-danger);
  --orange:           #F97316;            /* kept verbatim — no token equivalent */
  --warning:          var(--color-warning);
  --warning-dim:      var(--color-warning-alpha);
  --text-primary:     var(--color-text-primary);
  --text-secondary:   var(--color-text-secondary);
  --text-muted:       var(--color-muted);
  --border:           rgba(48, 54, 61, 0.6);   /* maps to --color-border with alpha */
  --border-light:     var(--color-border);
}

/* ── Base Styles ── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-family: var(--font-family);
  background-color: var(--color-bg-primary);
  color: var(--color-text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  line-height: 1.5;
  background-color: var(--color-bg-primary);
  color: var(--color-text-primary);
  margin: 0;
}

/* Remove old Google Fonts that may still be in individual pages */
/* (Actual removal happens by overriding font-family in body/html) */