/* ==========================================================================
   Carbotrack — base.css
   Design tokens, reset, typography, global elements, print rules
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Forest palette */
  --forest-50:  #f2f7f4;
  --forest-100: #e1ede7;
  --forest-200: #c5ddcf;
  --forest-300: #9dc4b1;
  --forest-400: #6fa58e;
  --forest-500: #4d8871;
  --forest-600: #396d59;
  --forest-700: #2f5747;
  --forest-800: #28463a;
  --forest-900: #1b3027;
  --forest-950: #0d1a15;

  /* Leaf palette */
  --leaf-300: #6ee7b7;
  --leaf-400: #34d399;
  --leaf-500: #10b981;
  --leaf-600: #059669;
  --leaf-700: #047857;

  /* Neutrals */
  --sage:       #98a89e;
  --earth:      #fbf9f5;
  --earth-sand: #efe9dc;

  /* Semantic */
  --text-strong: #0d1a15;
  --text-body:   #334155;
  --text-muted:  #64748b;
  --border-soft: #e1ede7;

  /* Radii */
  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  16px;
  --r-xl:  24px;
  --r-2xl: 28px;
  --r-pill: 9999px;

  /* Shadows */
  --sh-sm: 0 1px 2px rgba(13, 26, 21, .06);
  --sh-md: 0 4px 14px rgba(13, 26, 21, .08);
  --sh-lg: 0 12px 34px rgba(13, 26, 21, .12);
  --sh-xl: 0 24px 60px rgba(13, 26, 21, .16);

  /* Layout */
  --header-h: 5rem;
  --container: 80rem;

  /* Motion */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --dur: .25s;
}

/* --------------------------------------------------------------------------
   2. RESET
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--earth);
  color: var(--text-body);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, canvas { display: block; max-width: 100%; }

button, input, select, textarea { font: inherit; color: inherit; }

button { cursor: pointer; background: none; border: none; }

a { color: inherit; text-decoration: none; }

ul, ol { margin: 0; padding: 0; list-style: none; }

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: 'Poppins', 'Inter', sans-serif;
  font-weight: 700;
  color: var(--text-strong);
  line-height: 1.22;
}

p { margin: 0; }

/* --------------------------------------------------------------------------
   3. SELECTION & FOCUS
   -------------------------------------------------------------------------- */
::selection { background: var(--leaf-500); color: #fff; }

:focus-visible {
  outline: 2px solid var(--leaf-500);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --------------------------------------------------------------------------
   4. CUSTOM SCROLLBAR
   -------------------------------------------------------------------------- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #f1f5f3; }
::-webkit-scrollbar-thumb {
  background: var(--forest-300);
  border-radius: var(--r-pill);
}
::-webkit-scrollbar-thumb:hover { background: var(--forest-500); }

/* --------------------------------------------------------------------------
   5. TYPOGRAPHY HELPERS
   -------------------------------------------------------------------------- */
.eyebrow {
  display: inline-block;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--leaf-600);
}

.section-heading {
  font-size: clamp(1.75rem, 3.4vw, 2.35rem);
  margin-top: .35rem;
}

.section-sub {
  margin-top: .75rem;
  color: var(--text-muted);
  font-size: .95rem;
  line-height: 1.7;
}

.text-gradient {
  background: linear-gradient(100deg, var(--forest-600), var(--leaf-600));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* --------------------------------------------------------------------------
   6. ANIMATIONS
   -------------------------------------------------------------------------- */
@keyframes ct-pulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: .45; transform: scale(.86); }
}

@keyframes ct-fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes ct-spin { to { transform: rotate(360deg); } }

.pulse-dot { animation: ct-pulse 2s var(--ease) infinite; }

.fade-up { animation: ct-fade-up .5s var(--ease) both; }

.fa-spin { animation: ct-spin 1s linear infinite; }

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   7. PRINT (results report)
   -------------------------------------------------------------------------- */
@media print {
  @page { margin: 14mm; }

  .site-header,
  .site-footer,
  .no-print,
  #what-if-section,
  #challenge-section,
  #problem-section { display: none !important; }

  body {
    background: #fff !important;
    color: #000 !important;
    font-size: 11pt;
  }

  #results-section,
  #results-empty { display: block !important; margin: 0 !important; padding: 0 !important; }

  .chart-container,
  .rec-card,
  .kpi-card { page-break-inside: avoid; break-inside: avoid; }

  .kpi-card,
  .rec-card,
  .chart-container { box-shadow: none !important; border: 1px solid #ccc !important; }

  a[href]::after { content: ""; }
}