/* ============================================================
   GoCarbonTracker — Colors, Type, Tokens
   The single source of truth for the design system.
   Mirrors apps/dashboard/src/index.css from the codebase.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Lora:ital,wght@0,400;0,500;0,600;1,400&family=Roboto+Mono:wght@400;500;600&display=swap');

:root {
  /* ---------- Brand Colors ---------- */
  --gct-primary:        #1B4D3E; /* deep forest — the brand anchor; sidebar, headlines, primary buttons */
  --gct-primary-hover:  #164034;
  --gct-primary-light:  #E6F4F0; /* 8% tint for badges, icon backgrounds */

  --gct-success:        #059669; /* emerald — net-zero progress, "growing", positive deltas (also used in logo) */
  --gct-success-hover:  #047857;
  --gct-success-light:  #F0FDF4;

  --gct-secondary:       #2563EB; /* electric blue — secondary actions, charts, tcfd, secondary CTA */
  --gct-secondary-light: #EBF0FF;

  --gct-warning:        #DC6803; /* burnt orange — warning state, scope 1 in some contexts */
  --gct-warning-light:  #FFF8EB;

  --gct-critical:       #DC2626; /* alarm red — destructive actions, high-greenwashing flags */
  --gct-critical-light: #FEF2F2;

  --gct-accent:         #7C3AED; /* violet — chart-5, "Carbon Portfolio" tag */

  /* ---------- Scope Emissions Colors (semantic, used everywhere) ---------- */
  --gct-scope-1:        #F97316; /* orange — direct emissions */
  --gct-scope-2:        #2563EB; /* blue — purchased energy */
  --gct-scope-3:        #1B4D3E; /* forest — value chain */

  /* alt scope mapping seen in design tokens (.op file) */
  --gct-scope-1-alt:    #DC2626;
  --gct-scope-2-alt:    #F59E0B;
  --gct-scope-3-alt:    #2563EB;

  /* ---------- Chart Slots (5-color rotation) ---------- */
  --gct-chart-1: #1B4D3E;
  --gct-chart-2: #2563EB;
  --gct-chart-3: #22C55E;
  --gct-chart-4: #F59E0B;
  --gct-chart-5: #7C3AED;
  --gct-chart-6: #06B6D4;

  /* ---------- Neutrals (10-step gray scale) ---------- */
  --gct-n50:  #F9FAFB; /* page tint background, sidebar dividers */
  --gct-n100: #F3F4F6; /* hover / muted card */
  --gct-n200: #E5E7EB; /* default border, dividers, progress track */
  --gct-n300: #D1D5DB; /* hovered border */
  --gct-n400: #9CA3AF; /* disabled text, secondary captions */
  --gct-n500: #6B7280; /* muted body text */
  --gct-n600: #4B5563; /* body text */
  --gct-n700: #374151; /* strong body text */
  --gct-n800: #1F2937; /* default foreground */
  --gct-n900: #111827; /* card titles, hero headlines, dark CTAs */

  /* ---------- Semantic Surfaces (light mode) ---------- */
  --gct-bg:           #F8FAFC; /* page background */
  --gct-bg-card:      #FFFFFF; /* card surface */
  --gct-bg-elevated:  rgba(255,255,255,0.85); /* glassy floating surfaces */
  --gct-fg:           #1F2937;
  --gct-fg-card:      #111827;
  --gct-fg-muted:     #6B7280;
  --gct-border:       #E2E8F0;
  --gct-input:        #FFFFFF;
  --gct-ring:         #2563EB; /* focus ring */

  --gct-sidebar:      #FFFFFF;
  --gct-sidebar-fg:   #1F2937;
  --gct-sidebar-active-bg: #1B4D3E;
  --gct-sidebar-active-fg: #F8FAFC;

  /* atmospheric — used on marketing hero overlays */
  --gct-atmospheric-primary: #1B4D3E;
  --gct-atmospheric-light:   #2563EB;
  --gct-atmospheric-cloud:   #A3BFFA;

  /* ---------- Typography ---------- */
  --gct-font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --gct-font-serif: 'Lora', Georgia, serif; /* used sparingly for editorial accents */
  --gct-font-mono: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  --gct-text-display:  48px; /* hero stat */
  --gct-text-h1:       36px;
  --gct-text-h2:       30px;
  --gct-text-h3:       24px; /* section title on the dashboard */
  --gct-text-h4:       20px;
  --gct-text-body-lg:  18px;
  --gct-text-body:     16px;
  --gct-text-small:    14px; /* default UI body */
  --gct-text-caption:  12px;
  --gct-text-micro:    11px;

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

  --gct-leading-tight:   1.2;
  --gct-leading-snug:    1.35;
  --gct-leading-normal:  1.5;
  --gct-leading-relaxed: 1.65;

  --gct-tracking-tight: -0.025em; /* hero h1 */
  --gct-tracking-snug:  -0.01em;
  --gct-tracking-wide:   0.05em; /* uppercase eyebrows */

  /* ---------- Spacing ---------- */
  --gct-space-xs:   4px;
  --gct-space-sm:   8px;
  --gct-space-md:  16px;
  --gct-space-lg:  24px;
  --gct-space-xl:  32px;
  --gct-space-2xl: 48px;
  --gct-space-3xl: 64px;
  --gct-space-4xl: 96px;

  /* ---------- Radii ---------- */
  --gct-radius-xs:    4px; /* progress segments */
  --gct-radius-sm:    6px; /* small buttons, badges-rect */
  --gct-radius-md:    8px; /* default — most cards in the dashboard */
  --gct-radius-lg:   10px;
  --gct-radius-xl:   12px; /* feature cards, hero panels */
  --gct-radius-2xl:  16px; /* mobile pattern cards (StyleSeed) */
  --gct-radius-full: 9999px;

  /* ---------- Shadows (low-opacity, never colored) ---------- */
  --gct-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
  --gct-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08);
  --gct-shadow-md: 0 10px 30px rgba(15, 23, 42, 0.08);
  --gct-shadow-lg: 0 20px 45px rgba(15, 23, 42, 0.12);
  --gct-shadow-xl: 0 28px 60px rgba(15, 23, 42, 0.18);

  /* primary-tinted hover lift, used selectively on CTAs */
  --gct-shadow-cta:       0 4px 14px rgba(27, 77, 62, 0.30);
  --gct-shadow-cta-hover: 0 6px 20px rgba(27, 77, 62, 0.40);

  /* ---------- Motion ---------- */
  --gct-duration-fast:   150ms;
  --gct-duration-normal: 200ms;
  --gct-duration-slow:   300ms;
  --gct-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --gct-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

/* ---------- Dark Mode ---------- */
:root.dark, [data-theme="dark"] {
  --gct-bg:           #0F172A;
  --gct-bg-card:      #111C2D;
  --gct-fg:           #E2E8F0;
  --gct-fg-card:      #F8FAFC;
  --gct-fg-muted:     #94A3B8;
  --gct-border:       #1F2937;
  --gct-input:        #0F172A;
  --gct-ring:         #3B82F6;
  --gct-secondary:    #3B82F6;

  --gct-sidebar:      #101826;
  --gct-sidebar-fg:   #F1F5F9;
  --gct-sidebar-active-bg: #3B82F6;

  --gct-chart-1: #60A5FA;
  --gct-chart-2: #63E29F;
  --gct-chart-3: #FBBF24;
  --gct-chart-4: #A78BFA;
  --gct-chart-5: #F472B6;
}

/* ============================================================
   Semantic Type Classes
   Use these directly when prototyping; they apply the right
   font, size, weight, color and tracking together.
   ============================================================ */

.gct-display {
  font-family: var(--gct-font-sans);
  font-size: var(--gct-text-display);
  font-weight: var(--gct-weight-black);
  line-height: var(--gct-leading-tight);
  letter-spacing: var(--gct-tracking-tight);
  color: var(--gct-n900);
}

.gct-h1 {
  font-family: var(--gct-font-sans);
  font-size: var(--gct-text-h1);
  font-weight: var(--gct-weight-bold);
  line-height: var(--gct-leading-tight);
  letter-spacing: var(--gct-tracking-tight);
  color: var(--gct-n900);
}

.gct-h2 {
  font-family: var(--gct-font-sans);
  font-size: var(--gct-text-h2);
  font-weight: var(--gct-weight-bold);
  line-height: var(--gct-leading-tight);
  letter-spacing: var(--gct-tracking-tight);
  color: var(--gct-n900);
}

.gct-h3 {
  font-family: var(--gct-font-sans);
  font-size: var(--gct-text-h3);
  font-weight: var(--gct-weight-bold);
  line-height: var(--gct-leading-snug);
  letter-spacing: var(--gct-tracking-snug);
  color: var(--gct-n900);
}

.gct-h4 {
  font-family: var(--gct-font-sans);
  font-size: var(--gct-text-h4);
  font-weight: var(--gct-weight-semibold);
  line-height: var(--gct-leading-snug);
  color: var(--gct-n900);
}

.gct-body-lg {
  font-family: var(--gct-font-sans);
  font-size: var(--gct-text-body-lg);
  font-weight: var(--gct-weight-regular);
  line-height: var(--gct-leading-relaxed);
  color: var(--gct-n600);
}

.gct-body {
  font-family: var(--gct-font-sans);
  font-size: var(--gct-text-body);
  font-weight: var(--gct-weight-regular);
  line-height: var(--gct-leading-normal);
  color: var(--gct-n700);
}

.gct-small {
  font-family: var(--gct-font-sans);
  font-size: var(--gct-text-small);
  font-weight: var(--gct-weight-regular);
  line-height: var(--gct-leading-normal);
  color: var(--gct-n500);
}

.gct-caption {
  font-family: var(--gct-font-sans);
  font-size: var(--gct-text-caption);
  font-weight: var(--gct-weight-medium);
  line-height: var(--gct-leading-normal);
  color: var(--gct-n500);
}

/* All-caps eyebrow / KPI label — appears throughout the dashboard above cards */
.gct-eyebrow {
  font-family: var(--gct-font-sans);
  font-size: var(--gct-text-caption);
  font-weight: var(--gct-weight-bold);
  line-height: 1;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--gct-primary);
}

/* Big stat number — like "$48.2K" with attached small unit */
.gct-stat {
  font-family: var(--gct-font-sans);
  font-size: var(--gct-text-h1);
  font-weight: var(--gct-weight-bold);
  line-height: 1;
  letter-spacing: var(--gct-tracking-tight);
  color: var(--gct-n900);
  white-space: nowrap;
}
.gct-stat .unit { font-size: 0.5em; margin-left: 0.1em; font-weight: var(--gct-weight-semibold); }

/* Mono-spaced — used for IDs, code, hex, scope IDs, latitudes */
.gct-mono {
  font-family: var(--gct-font-mono);
  font-size: var(--gct-text-small);
  color: var(--gct-n700);
}

/* Editorial serif — sparingly used in About/Methodology lead paragraphs */
.gct-serif {
  font-family: var(--gct-font-serif);
  font-style: italic;
  font-weight: var(--gct-weight-regular);
  color: var(--gct-n700);
}

/* Default body styling */
body {
  font-family: var(--gct-font-sans);
  font-feature-settings: "liga" on, "kern" on;
  background: var(--gct-bg);
  color: var(--gct-fg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}