/* ============================================================
   KarbonMetrik — Foundational tokens
   Colors, typography, spacing, radii, shadows, motion.
   Import this file at the top of any prototype or UI kit.
   ============================================================ */

/* Webfonts.
   PRIMARY: Manrope — geometric humanist sans, matches the logo wordmark.
   MONO:    JetBrains Mono — for hashes, report IDs.
   Both loaded from Google Fonts as the user did NOT supply font files.
   Flagged in README — please drop ttf/woff2 files into /fonts and we will
   swap the @import for @font-face blocks pointing at them. */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* ----- Brand heroes ----- */
  --km-green:           #1FAE5C;   /* "METRIK" green, primary accent */
  --km-green-pressed:   #178A47;
  --km-green-hover:     #1B9C52;
  --km-forest:          #0E5C36;   /* deep, weighted green for sealed/verified */
  --km-mint:            #E6F7EE;   /* soft success bg */
  --km-mint-strong:     #B7E9CB;

  --km-slate:           #1F2A37;   /* "KARBON" slate, primary text */
  --km-slate-soft:      #2D3A48;
  --km-ink:             #0B1118;   /* deepest text on light surfaces */

  /* ----- Neutrals (cool, faint green undertone) ----- */
  --km-paper:           #FAFBFA;   /* default page bg */
  --km-white:           #FFFFFF;
  --km-stone-50:        #F4F6F4;
  --km-stone-100:       #E9ECE9;
  --km-stone-200:       #D7DCD7;
  --km-stone-300:       #B8C0B8;
  --km-stone-400:       #8A938A;
  --km-stone-500:       #6B7280;
  --km-stone-600:       #4B5563;
  --km-stone-700:       #374151;
  --km-stone-800:       #1F2A37;

  --km-border:          #E5EBE7;  /* default 1px hairline, faint green tint */
  --km-border-strong:   #CFD7D1;
  --km-divider:         #EEF1EE;

  /* ----- Semantic ----- */
  --km-success:         var(--km-green);
  --km-success-bg:      var(--km-mint);

  --km-warning:         #D97706;
  --km-warning-bg:      #FEF3E2;

  --km-danger:          #DC2626;
  --km-danger-bg:       #FDECEC;

  --km-info:            #2563EB;
  --km-info-bg:         #E8EFFE;

  /* Reserved for blockchain / hash UI specifically */
  --km-chain:           #2563EB;
  --km-chain-bg:        #EEF3FF;

  /* ----- Foreground / background semantic aliases ----- */
  --km-bg:              var(--km-paper);
  --km-bg-elevated:     var(--km-white);
  --km-bg-sunken:       var(--km-stone-50);

  --km-fg-1:            var(--km-ink);          /* headlines, key numbers */
  --km-fg-2:            var(--km-slate);        /* body */
  --km-fg-3:            var(--km-stone-600);    /* secondary */
  --km-fg-4:            var(--km-stone-500);    /* tertiary, captions */
  --km-fg-on-green:     #FFFFFF;
  --km-fg-on-mint:      var(--km-forest);

  /* ----- Chart palette (green ramp + slate baseline) ----- */
  --km-chart-1:         #0E5C36;
  --km-chart-2:         #1FAE5C;
  --km-chart-3:         #6FD49B;
  --km-chart-4:         #B7E9CB;
  --km-chart-baseline:  #1F2A37;

  /* ============================================================
     TYPOGRAPHY
     ============================================================ */
  --km-font-sans: 'Manrope', ui-sans-serif, system-ui, -apple-system,
                   'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --km-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, 'Roboto Mono',
                   Menlo, Consolas, monospace;
  --km-font-display: var(--km-font-sans);

  /* Type scale — 1.25 modular, anchored at 16px */
  --km-text-xs:    11px;     --km-lh-xs:   16px;
  --km-text-sm:    13px;     --km-lh-sm:   20px;
  --km-text-base:  16px;     --km-lh-base: 24px;
  --km-text-md:    18px;     --km-lh-md:   28px;
  --km-text-lg:    22px;     --km-lh-lg:   30px;
  --km-text-xl:    28px;     --km-lh-xl:   36px;
  --km-text-2xl:   36px;     --km-lh-2xl:  42px;
  --km-text-3xl:   48px;     --km-lh-3xl:  54px;
  --km-text-4xl:   64px;     --km-lh-4xl:  68px;
  --km-text-5xl:   84px;     --km-lh-5xl:  88px;

  --km-tracking-tight:  -0.02em;
  --km-tracking-normal: 0;
  --km-tracking-wide:    0.06em;   /* eyebrow ALL CAPS */
  --km-tracking-mono:    0;

  --km-weight-regular: 400;
  --km-weight-medium:  500;
  --km-weight-semi:    600;
  --km-weight-bold:    700;
  --km-weight-black:   800;

  /* ============================================================
     SPACING (4pt base)
     ============================================================ */
  --km-space-0:  0;
  --km-space-1:  4px;
  --km-space-2:  8px;
  --km-space-3:  12px;
  --km-space-4:  16px;
  --km-space-5:  24px;
  --km-space-6:  32px;
  --km-space-7:  48px;
  --km-space-8:  64px;
  --km-space-9:  96px;
  --km-space-10: 128px;

  /* ============================================================
     RADII
     ============================================================ */
  --km-radius-sm:    6px;    /* inputs, small buttons */
  --km-radius-md:   10px;    /* cards, modals */
  --km-radius-lg:   14px;    /* KPI tiles, hero cards */
  --km-radius-pill: 999px;

  /* ============================================================
     SHADOWS — quiet, no color
     ============================================================ */
  --km-shadow-1: 0 1px 2px rgba(15, 23, 18, 0.04);
  --km-shadow-2: 0 4px 12px rgba(15, 23, 18, 0.06);
  --km-shadow-3: 0 12px 32px rgba(15, 23, 18, 0.10);
  --km-shadow-inset-press: inset 0 1px 0 rgba(0, 0, 0, 0.12);

  /* ============================================================
     MOTION
     ============================================================ */
  --km-ease:        cubic-bezier(0.2, 0.8, 0.2, 1);
  --km-dur-hover:   120ms;
  --km-dur-state:   180ms;
  --km-dur-enter:   240ms;
  --km-dur-sheet:   320ms;

  /* ============================================================
     LAYOUT
     ============================================================ */
  --km-container:        1200px;
  --km-app-sidebar:      240px;
  --km-app-gutter:       24px;
  --km-app-row-padding:  16px;
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   Plain HTML inherits these. Use the utility classes below for
   tokens that don't map onto an element (eyebrow, kpi, etc.).
   ============================================================ */

html, body {
  font-family: var(--km-font-sans);
  font-size: var(--km-text-base);
  line-height: var(--km-lh-base);
  color: var(--km-fg-2);
  background: var(--km-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'ss01', 'cv11';   /* manrope alt set, slashed zero */
}

h1, h2, h3, h4, h5, h6 {
  color: var(--km-fg-1);
  font-family: var(--km-font-display);
  font-weight: var(--km-weight-bold);
  letter-spacing: var(--km-tracking-tight);
  text-wrap: balance;
  margin: 0;
}

h1 { font-size: var(--km-text-4xl); line-height: var(--km-lh-4xl); font-weight: var(--km-weight-black); }
h2 { font-size: var(--km-text-3xl); line-height: var(--km-lh-3xl); }
h3 { font-size: var(--km-text-2xl); line-height: var(--km-lh-2xl); }
h4 { font-size: var(--km-text-xl);  line-height: var(--km-lh-xl); }
h5 { font-size: var(--km-text-lg);  line-height: var(--km-lh-lg); }
h6 { font-size: var(--km-text-md);  line-height: var(--km-lh-md); font-weight: var(--km-weight-semi); }

p {
  font-size: var(--km-text-base);
  line-height: var(--km-lh-base);
  color: var(--km-fg-2);
  text-wrap: pretty;
  margin: 0;
}

small, .km-caption {
  font-size: var(--km-text-sm);
  line-height: var(--km-lh-sm);
  color: var(--km-fg-3);
}

code, kbd, samp, pre, .km-mono {
  font-family: var(--km-font-mono);
  font-variant-numeric: tabular-nums slashed-zero;
  font-size: 0.92em;
}

a {
  color: var(--km-forest);
  text-decoration-color: color-mix(in oklab, var(--km-forest) 30%, transparent);
  text-underline-offset: 3px;
  transition: color var(--km-dur-hover) var(--km-ease);
}
a:hover { color: var(--km-green-pressed); }

hr { border: 0; border-top: 1px solid var(--km-divider); margin: var(--km-space-6) 0; }

/* ----- Utility: eyebrow / overline ----- */
.km-eyebrow {
  font-size: var(--km-text-xs);
  font-weight: var(--km-weight-semi);
  letter-spacing: var(--km-tracking-wide);
  text-transform: uppercase;
  color: var(--km-forest);
}

/* ----- Utility: KPI number ----- */
.km-kpi {
  font-family: var(--km-font-display);
  font-weight: var(--km-weight-black);
  font-size: var(--km-text-3xl);
  line-height: 1;
  letter-spacing: var(--km-tracking-tight);
  color: var(--km-fg-1);
  font-variant-numeric: tabular-nums;
}

/* ----- Focus ring ----- */
:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--km-green);
  outline-offset: 2px;
  border-radius: 6px;
}