/* ============================================================================
   ISonTrack Design System — Foundational Tokens
   Source of truth: IS_tracker/src/styles/globals.css (Tailwind v4 @theme)
   ----------------------------------------------------------------------------
   ISonTrack is a B2B SaaS for infrastructure sustainability tracking. Brand
   lives at the intersection of "fresh/airy/green" and "rigorous/engineered".
   The signature motif is the blue → mint-green gradient — used in the logo,
   primary CTAs, AI features, and gradient text for "onTrack".
   ============================================================================ */

@import url('./fonts/fonts.css');

:root {
  /* ── Brand colors ─────────────────────────────────────────────────────── */
  --primary:          #02E3A7;      /* Signature ISonTrack mint — primary accent */
  --primary-light:    #D0FBE9;      /* Pill/badge backgrounds for primary */
  --accent:           #10B981;      /* Stronger emerald — "On Track", success */
  --accent-light:     #D1FAE5;      /* Success pill backgrounds */
  --mint:             #ECFDF5;      /* Faintest mint wash */

  /* The signature brand gradient — blue → mint. Use for logo, primary CTAs,
     gradient text, AI chat header, and hero accents. Never for body bg. */
  --brand-gradient-start: #2563EB;  /* Blue-600 */
  --brand-gradient-end:   #02E3A7;  /* Primary mint */
  --brand-gradient: linear-gradient(135deg, #2563EB, #02E3A7);

  /* ── Neutrals (slate family) ──────────────────────────────────────────── */
  --cream:            #F8FAFC;      /* App background — slate-50, never pure white */
  --light:            #F1F5F9;      /* slate-100 — hover, muted backgrounds */
  --border:           #E2E8F0;      /* slate-200 — default border */
  --mid:              #64748B;      /* slate-500 — secondary text, icons */
  --mid-soft:         #94A3B8;      /* slate-400 — tertiary text */
  --dark:             #0F172A;      /* slate-900 — primary text */
  --white:            #FFFFFF;      /* Card surfaces */

  /* ── Semantic / status colors ─────────────────────────────────────────── */
  --on-track:         #10B981;      /* green — sustainability credit On Track */
  --behind:           #F59E0B;      /* amber — warning / behind schedule */
  --at-risk:          #EF4444;      /* red — critical / at risk */
  --not-pursued:      #64748B;      /* slate — excluded / not pursued */
  --not-material:     #94A3B8;      /* slate-light — N/A */

  --gold:             #F59E0B;      /* Alias for "behind" in token set */
  --gold-light:       #FEF3C7;
  --danger:           #EF4444;      /* Alias for "at-risk" */
  --danger-light:     #FEE2E2;

  /* Theme colors — from theme-icons.jsx. Used for credit theme badges. */
  --theme-governance:     #2563EB;  /* blue */
  --theme-governance-bg:  #DBEAFE;
  --theme-economic:       #F59E0B;  /* amber */
  --theme-economic-bg:    #FEF3C7;
  --theme-environment:    #10B981;  /* emerald */
  --theme-environment-bg: #D1FAE5;
  --theme-social:         #8B5CF6;  /* violet */
  --theme-social-bg:      #EDE9FE;

  /* Scope colors — carbon accounting (from emission-factors.js). */
  --scope-1: #F97316;               /* orange */
  --scope-2: #3B82F6;               /* blue   */
  --scope-3: #A855F7;               /* purple */

  /* ── Fonts ────────────────────────────────────────────────────────────── */
  --font-sans:    'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-heading: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

  /* ── Type scale (semantic) ────────────────────────────────────────────── */
  /* App is dense and data-heavy; scale skews small.  */
  --text-display:  40px;    /* Marketing / login headline — rare */
  --text-h1:       30px;    /* Page titles */
  --text-h2:       20px;    /* Section titles */
  --text-h3:       16px;    /* Card titles ("text-base font-bold") */
  --text-h4:       14px;    /* Sub-section titles ("text-sm font-semibold") */
  --text-body:     14px;    /* Default body (text-sm) */
  --text-body-lg:  16px;    /* Occasional larger body on marketing-ish surfaces */
  --text-ui:       13px;    /* Compact UI rows, form helpers */
  --text-label:    12px;    /* Form labels, captions (text-xs) */
  --text-meta:     11px;    /* Meta info, hints (text-[11px]) */
  --text-micro:    10px;    /* Pill labels, badges, tiny stats */
  --text-nano:     9px;     /* Tight data labels, axes, table micro-stats */

  --leading-tight:  1.2;
  --leading-snug:   1.35;
  --leading-normal: 1.5;
  --leading-relaxed: 1.6;

  --tracking-widest: 0.1em;  /* uppercase pill labels */
  --tracking-wider:  0.05em;
  --tracking-tight: -0.02em; /* large display headings */

  /* ── Spacing ──────────────────────────────────────────────────────────── */
  --space-0:   0;
  --space-0_5: 2px;
  --space-1:   4px;
  --space-1_5: 6px;
  --space-2:   8px;
  --space-2_5: 10px;
  --space-3:   12px;
  --space-4:   16px;   /* Default card padding */
  --space-5:   20px;   /* Modal padding */
  --space-6:   24px;   /* Page gutters */
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;

  /* ── Radius ───────────────────────────────────────────────────────────── */
  --radius-sm:   4px;   /* Tiny pills, dots */
  --radius-md:   6px;   /* Status badges */
  --radius-lg:   8px;   /* Buttons, sidebar rows (rounded-lg) */
  --radius-xl:   12px;  /* Cards, inputs, dropdowns (rounded-xl) */
  --radius-2xl:  16px;  /* Modal, login card (rounded-2xl) */
  --radius-full: 9999px;

  /* ── Shadows — airy & diffuse. Dark (slate-900) tinted, not pure black. ─ */
  --shadow-xs:   0 1px 2px 0 rgb(15 23 42 / 0.03);
  --shadow-sm:   0 1px 2px 0 rgb(15 23 42 / 0.02);           /* Default cards */
  --shadow-md:   0 4px 6px -1px rgb(15 23 42 / 0.05), 0 2px 4px -2px rgb(15 23 42 / 0.05);
  --shadow-lg:   0 10px 15px -3px rgb(15 23 42 / 0.05), 0 4px 6px -4px rgb(15 23 42 / 0.04); /* Dropdowns, popovers */
  --shadow-xl:   0 20px 25px -5px rgb(15 23 42 / 0.05), 0 8px 10px -6px rgb(15 23 42 / 0.05); /* Login card */
  --shadow-2xl:  0 25px 50px -12px rgb(15 23 42 / 0.10);     /* Modals */
  /* Colored glow under primary buttons on hover */
  --shadow-primary-glow: 0 10px 15px -3px rgb(2 227 167 / 0.25);

  /* ── Motion ───────────────────────────────────────────────────────────── */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast:   150ms;   /* Hover, focus, subtle state */
  --duration-med:    250ms;
  --duration-slow:   350ms;   /* Fade-in for AI thinking bubble */

  /* ── Z-index ──────────────────────────────────────────────────────────── */
  --z-sidebar:  30;
  --z-header:   40;
  --z-dropdown: 50;
  --z-modal:    100;
  --z-toast:    200;
}

/* ============================================================================
   Base element styles — load this file once at the root of any design artifact.
   ============================================================================ */
html { font-family: var(--font-sans); }
body {
  font-family: var(--font-sans);
  background-color: var(--cream);
  color: var(--dark);
  margin: 0;
  font-size: var(--text-body);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5 { font-family: var(--font-heading); color: var(--dark); margin: 0; }
h1 { font-size: var(--text-h1); font-weight: 700; letter-spacing: var(--tracking-tight); line-height: var(--leading-tight); }
h2 { font-size: var(--text-h2); font-weight: 700; line-height: var(--leading-snug); }
h3 { font-size: var(--text-h3); font-weight: 700; line-height: var(--leading-snug); }
h4 { font-size: var(--text-h4); font-weight: 600; line-height: var(--leading-snug); }

p  { margin: 0; font-size: var(--text-body); color: var(--dark); }
small { font-size: var(--text-label); color: var(--mid); }
code, pre { font-family: var(--font-mono); font-size: 0.9em; }

/* ── Semantic utility classes — pulled straight from the product ───────── */
.text-gradient {
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.status-on-track  { color: var(--on-track); }
.status-behind    { color: var(--behind); }
.status-at-risk   { color: var(--at-risk); }
.status-not-pursued { color: var(--not-pursued); }

.bg-status-on-track  { background-color: var(--on-track); }
.bg-status-behind    { background-color: var(--behind); }
.bg-status-at-risk   { background-color: var(--at-risk); }

/* Animations */
@keyframes isontrack-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-fade-in { animation: isontrack-fade-in var(--duration-slow) var(--ease-out) both; }

@keyframes isontrack-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.animate-shimmer {
  background: linear-gradient(90deg, transparent 0%, rgb(2 227 167 / 0.15) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: isontrack-shimmer 2.5s linear infinite;
}

/* Scrollbar — product uses thin slate scrollbars */
.isontrack-scroll::-webkit-scrollbar { width: 6px; height: 6px; }
.isontrack-scroll::-webkit-scrollbar-track { background: transparent; }
.isontrack-scroll::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 3px; }
.isontrack-scroll::-webkit-scrollbar-thumb:hover { background: var(--mid-soft); }