/* ============================================================
   TERRA REPORTING — Core Design Tokens
   Colors + Type foundation for the ESG / Sustainability platform.
   Import this file first; every other surface builds on these vars.
   ============================================================ */

/* ---- Webfonts ---------------------------------------------------
   Brand + UI : Helvetica (self-hosted from the official Terra Brand Kit)
   Data / mono: IBM Plex Mono (tabular figures for ESG data — CDN)
   Helvetica Compressed / Rounded are available for campaign display use.
------------------------------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* Helvetica — core family (self-hosted) */
@font-face { font-family:'Helvetica'; font-weight:300; font-style:normal; font-display:swap; src:url('fonts/helvetica-light-587ebe5a59211.ttf') format('truetype'); }
@font-face { font-family:'Helvetica'; font-weight:400; font-style:normal; font-display:swap; src:url('fonts/Helvetica.ttf') format('truetype'); }
@font-face { font-family:'Helvetica'; font-weight:400; font-style:italic; font-display:swap; src:url('fonts/Helvetica-Oblique.ttf') format('truetype'); }
@font-face { font-family:'Helvetica'; font-weight:700; font-style:normal; font-display:swap; src:url('fonts/Helvetica-Bold.ttf') format('truetype'); }
@font-face { font-family:'Helvetica'; font-weight:700; font-style:italic; font-display:swap; src:url('fonts/Helvetica-BoldOblique.ttf') format('truetype'); }
/* Display variants */
@font-face { font-family:'Helvetica Compressed'; font-weight:700; font-style:normal; font-display:swap; src:url('fonts/helvetica-compressed-5871d14b6903a.otf') format('opentype'); }
@font-face { font-family:'Helvetica Rounded'; font-weight:700; font-style:normal; font-display:swap; src:url('fonts/helvetica-rounded-bold-5871d05ead8de.otf') format('opentype'); }

:root {
  /* ========== BRAND COLOR — Forest Green ramp ========== */
  --green-900: #0E2419;  /* deepest — heavy ink-on-green surfaces */
  --green-800: #17362A;  /* BRAND forest (palette) — primary dark */
  --green-700: #1B4736;  /* hover/pressed on primary */
  --green-600: #217358;  /* EMERALD (palette) — primary action */
  --green-500: #2E8C6A;  /* bright accent green */
  --green-400: #5BA987;
  --green-300: #B9E3C6;  /* MINT (palette) — soft fill / chips */
  --green-200: #D6EFDF;
  --green-100: #E9F5EE;  /* pale tint — section wash */
  --green-50:  #F3F9F5;  /* faintest green wash */

  /* ========== ACCENTS (palette) ========== */
  --sky-300:   #C2E9F1;  /* soft sky (palette) */
  --sky-500:   #5FB8CC;  /* deepened sky for data/links-alt */
  --sky-700:   #2E7D92;
  --clay-300:  #F0BFB1;  /* soft terracotta tint */
  --clay-500:  #E2856E;  /* TERRACOTTA (palette) — highlight */
  --clay-700:  #C0573C;  /* deepened clay — alerts/negative ESG */

  /* ========== NEUTRALS — warm, paper-leaning ========== */
  --ink:       #231F20;  /* near-black (palette) — primary text */
  --slate-800: #2C2A2B;
  --slate-700: #46444A;  /* secondary text */
  --slate-500: #6E6B70;  /* tertiary / muted text */
  --slate-400: #94909A;  /* placeholder, disabled text */
  --slate-300: #C7C4C9;  /* borders strong */
  --slate-200: #E4E1DE;  /* hairline borders */
  --slate-150: #EEEBE6;  /* subtle dividers on cream */
  --slate-100: #F4F1EC;  /* app neutral surface */
  --cream:     #FFFAF0;  /* FLORAL WHITE (palette) — brand canvas */
  --white:     #FFFFFF;

  /* ========== SEMANTIC — light theme aliases ========== */
  --bg-canvas:    var(--cream);     /* page background */
  --bg-surface:   var(--white);     /* cards, panels */
  --bg-subtle:    var(--green-50);  /* zebra rows, wells */
  --bg-inset:     var(--slate-100); /* inputs, inset wells */
  --bg-inverse:   var(--green-800); /* dark sections */

  --fg-primary:   var(--ink);
  --fg-secondary: var(--slate-700);
  --fg-muted:     var(--slate-500);
  --fg-onbrand:   var(--cream);     /* text on forest green */
  --fg-link:      var(--green-600);

  --border-subtle: var(--slate-200);
  --border-default:var(--slate-300);
  --border-strong: var(--slate-400);
  --border-brand:  var(--green-600);

  --action-primary:        var(--green-600);
  --action-primary-hover:  var(--green-700);
  --action-primary-press:  var(--green-800);

  /* ========== STATUS ========== */
  --success:     #217358;  --success-bg: #E9F5EE;  --success-fg: #155C44;
  --warning:     #C98A2B;  --warning-bg: #FBF1DF;  --warning-fg: #8A5E18;
  --danger:      #C0573C;  --danger-bg:  #FBEAE4;  --danger-fg:  #8F3A24;
  --info:        #2E7D92;  --info-bg:    #E5F4F8;  --info-fg:    #1E5868;

  /* ========== ESG CATEGORY COLORS ========== */
  --esg-environment: #217358;  /* E — emerald */
  --esg-social:      #2E7D92;  /* S — sky/teal */
  --esg-governance:  #C0573C;  /* G — terracotta */

  /* ========== DATA-VIZ SEQUENCE ========== */
  --viz-1: #217358;  --viz-2: #5FB8CC;  --viz-3: #E2856E;
  --viz-4: #B9E3C6;  --viz-5: #1B4736;  --viz-6: #C98A2B;

  /* ========== TYPOGRAPHY ========== */
  --font-brand: Arial, 'Helvetica Neue', 'Helvetica', system-ui, sans-serif;
  --font-sans: Arial, 'Helvetica Neue', 'Helvetica', system-ui, sans-serif;
  --font-mono:  'IBM Plex Mono', 'Cascadia Code', ui-monospace, monospace;
  /* Optional campaign display faces */
  --font-compressed: 'Helvetica Compressed', 'Helvetica', Arial, sans-serif;
  --font-rounded:    'Helvetica Rounded', 'Helvetica', Arial, sans-serif;

  /* Type scale — 1.250 major-third, base 16px */
  --text-xs:   0.75rem;   /* 12 */
  --text-sm:   0.875rem;  /* 14 */
  --text-base: 1rem;      /* 16 */
  --text-md:   1.125rem;  /* 18 */
  --text-lg:   1.375rem;  /* 22 */
  --text-xl:   1.75rem;   /* 28 */
  --text-2xl:  2.25rem;   /* 36 */
  --text-3xl:  2.875rem;  /* 46 */
  --text-4xl:  3.75rem;   /* 60 */
  --text-5xl:  4.75rem;   /* 76 — marketing hero */

  --leading-tight: 1.1;
  --leading-snug:  1.25;
  --leading-normal:1.5;
  --leading-relaxed:1.65;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.12em;  /* brand eyebrow / wordmark feel */

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

  /* ========== RADII ========== */
  --radius-xs:  4px;
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  14px;
  --radius-xl:  20px;
  --radius-2xl: 28px;
  --radius-pill:999px;

  /* ========== SPACING (4px base) ========== */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 20px;  --space-6: 24px;  --space-8: 32px;  --space-10: 40px;
  --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px;
  --space-32: 128px;

  /* ========== ELEVATION — soft, low-contrast enterprise ========== */
  --shadow-xs: 0 1px 2px rgba(23,54,42,0.06);
  --shadow-sm: 0 1px 3px rgba(23,54,42,0.08), 0 1px 2px rgba(23,54,42,0.04);
  --shadow-md: 0 4px 12px rgba(23,54,42,0.08), 0 2px 4px rgba(23,54,42,0.04);
  --shadow-lg: 0 12px 28px rgba(23,54,42,0.12), 0 4px 8px rgba(23,54,42,0.05);
  --shadow-xl: 0 24px 56px rgba(14,36,25,0.18), 0 8px 16px rgba(14,36,25,0.06);
  --ring-focus: 0 0 0 3px rgba(33,115,88,0.28);

  /* ========== MOTION ========== */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   140ms;
  --dur-base:   220ms;
  --dur-slow:   360ms;
}

/* ============================================================
   DARK THEME — forest-canvas inversion
   ============================================================ */
[data-theme="dark"] {
  --bg-canvas:    #0E2419;
  --bg-surface:   #14301F;
  --bg-subtle:    #112A1B;
  --bg-inset:     #0B1F14;
  --bg-inverse:   #061009;

  --fg-primary:   #EAF3EC;
  --fg-secondary: #B6CcBD;
  --fg-muted:     #7E9587;
  --fg-onbrand:   #EAF3EC;
  --fg-link:      #7FD3AC;

  --border-subtle: rgba(255,255,255,0.07);
  --border-default:rgba(255,255,255,0.12);
  --border-strong: rgba(255,255,255,0.20);
  --border-brand:  #2E8C6A;

  --action-primary:       #2E8C6A;
  --action-primary-hover: #38A37C;
  --action-primary-press: #5BA987;

  --success-bg:#12301F; --warning-bg:#2E2410; --danger-bg:#2E1812; --info-bg:#0F2A30;

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 14px rgba(0,0,0,0.45);
  --shadow-lg: 0 16px 36px rgba(0,0,0,0.55);
  --ring-focus: 0 0 0 3px rgba(91,169,135,0.40);
}

/* ============================================================
   SEMANTIC TYPE — apply directly or copy into product CSS
   ============================================================ */
.t-display {
  font-family: var(--font-brand);
  font-weight: var(--weight-bold);
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-primary);
}
.t-eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--green-600);
}
.t-h1 { font-family: var(--font-brand); font-weight: 700; font-size: var(--text-3xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--fg-primary); }
.t-h2 { font-family: var(--font-brand); font-weight: 700; font-size: var(--text-2xl); line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); color: var(--fg-primary); }
.t-h3 { font-family: var(--font-sans);  font-weight: 600; font-size: var(--text-xl); line-height: var(--leading-snug); color: var(--fg-primary); }
.t-h4 { font-family: var(--font-sans);  font-weight: 600; font-size: var(--text-lg); line-height: var(--leading-snug); color: var(--fg-primary); }
.t-lead { font-family: var(--font-sans); font-weight: 400; font-size: var(--text-md); line-height: var(--leading-relaxed); color: var(--fg-secondary); }
.t-body { font-family: var(--font-sans); font-weight: 400; font-size: var(--text-base); line-height: var(--leading-normal); color: var(--fg-secondary); }
.t-small{ font-family: var(--font-sans); font-weight: 400; font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--fg-muted); }
.t-label{ font-family: var(--font-sans); font-weight: 600; font-size: var(--text-sm); line-height: 1.3; color: var(--fg-primary); }
.t-caps { font-family: var(--font-sans); font-weight: 600; font-size: var(--text-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--fg-muted); }
.t-metric{ font-family: var(--font-brand); font-weight: 700; font-size: var(--text-3xl); line-height: 1; letter-spacing: var(--tracking-tight); font-variant-numeric: tabular-nums; color: var(--fg-primary); }
.t-mono { font-family: var(--font-mono); font-size: var(--text-sm); font-variant-numeric: tabular-nums; color: var(--fg-secondary); }