/* Kinertic Design System — tokens */

@font-face {
  font-family: "ABC Monument Grotesk Semi Mono";
  src: url("./fonts/ABCMonumentGroteskSemiMono-Light.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "ABC Monument Grotesk Semi Mono";
  src: url("./fonts/ABCMonumentGroteskSemiMono-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "ABC Monument Grotesk Semi Mono";
  src: url("./fonts/ABCMonumentGroteskSemiMono-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "ABC Monument Grotesk Semi Mono";
  src: url("./fonts/ABCMonumentGroteskSemiMono-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* --- Brand / Primary (lavender) --- */
  --kx-primary-100: #ECEAF6;
  --kx-primary-200: #E2DEF3;
  --kx-primary-300: #C9BEF0;
  --kx-primary-400: #AC99F2;  /* brand accent */
  --kx-primary-500: #9E8DDE;
  --kx-primary-600: #8B7CC4;
  --kx-primary-700: #6E6B83;
  --kx-primary-800: #594F7D;
  --kx-primary-900: #4B4071;

  /* --- Neutrals --- */
  --kx-neutral-50:  #FFFFFF;
  --kx-neutral-100: #F7F8FA;  /* app background */
  --kx-neutral-200: #F2F2F5;  /* subtle chip / hover */
  --kx-neutral-300: #E1E3E6;  /* border */
  --kx-neutral-400: #CDCED6;
  --kx-neutral-500: #A3A9AF;  /* placeholder */
  --kx-neutral-600: #50575E;  /* secondary text */
  --kx-neutral-700: #353A40;
  --kx-neutral-800: #141414;  /* body */
  --kx-neutral-900: #0A0A0A;

  /* --- Semantic --- */
  --kx-success-200: #E8F2ED;
  --kx-success-500: #347D7D;
  --kx-success-800: #1E5A4E;
  --kx-error-200:   #FEEBEC;
  --kx-error-500:   #E7534A;
  --kx-error-800:   #D14343;
  --kx-warning-200: #FAF1E5;
  --kx-warning-500: #CC7000;

  /* --- Asset / chart palette --- */
  --kx-asset-vessel:   #3C81AF;
  --kx-asset-pipeline: #3B5C71;
  --kx-asset-refinery: #0D5785;
  --kx-asset-crude:    #154360;
  --kx-asset-terminal: #4E469C;
  --kx-asset-rail:     #76D0C6;
  --kx-asset-barge:    #95CBED;
  --kx-asset-sky-500:  #4C5AC0;
  --kx-asset-tortoise: #4CA7C0;
  --kx-asset-yellow:   #CCC200;
  --kx-asset-copper:   #A16E62;

  /* --- Tier palette (CI data provenance) ----------------------------------
     Cross-canvas convention for the three CI data-quality tiers used in
     Trade Finance, CBAM, ProvenanceBlock, and any future component that
     visualises Primary / Modelled / Default provenance. Single source of
     truth — components reference these tokens rather than hardcoding hex.
     Introduced 2026-05-07 to consolidate the 3 conflicting tier palettes
     that had drifted across insights.html. CBAM canvas should migrate to
     these in a follow-up slice. ------------------------------------------- */
  --kx-tier-primary:       #1E5A4E;  /* primary · audited (CLEAR Path) */
  --kx-tier-primary-tint:  #E8F2ED;
  --kx-tier-modelled:      #5B8CB0;  /* modelled · MCON / asset-derived */
  --kx-tier-modelled-tint: #E5EDF3;
  --kx-tier-default:       #9DA1AC;  /* default · country / grade fallback */
  --kx-tier-default-tint:  #F0F1F3;

  /* --- Page surface tokens --- */
  --kx-bg-page:   var(--kx-neutral-100);
  --kx-bg-surface: var(--kx-neutral-50);
  --kx-bg-muted:  var(--kx-neutral-200);
  --kx-border:    var(--kx-neutral-300);
  --kx-text:      var(--kx-neutral-800);
  --kx-text-muted: var(--kx-neutral-600);
  --kx-text-subtle: var(--kx-neutral-500);

  /* --- Type --- */
  --kx-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --kx-font-display: "ABC Monument Grotesk Semi Mono", "IBM Plex Mono", ui-monospace, monospace;
  --kx-font-mono: "ABC Monument Grotesk Semi Mono", ui-monospace, monospace;

  /* --- Radii --- */
  --kx-radius-xs: 4px;
  --kx-radius-sm: 6px;   /* chips, buttons */
  --kx-radius-md: 8px;   /* inputs, cards */
  --kx-radius-lg: 12px;  /* dialogs */
  --kx-radius-full: 9999px;

  /* --- Shadows --- */
  --kx-shadow-card:  0 8px 40px 0 rgba(0,0,0,0.05), 0 12px 32px -16px rgba(0,0,51,0.06);
  --kx-shadow-hover: 0 8px 24px 0 rgba(113,115,117,0.10);
  --kx-shadow-popover: 0 10px 34px 0 rgba(173,174,180,0.20);
  --kx-shadow-inset-border: inset 0 0 0 1px var(--kx-border);

  /* --- Spacing scale (4px base) --- */
  --kx-space-1: 4px;
  --kx-space-2: 8px;
  --kx-space-3: 12px;
  --kx-space-4: 16px;
  --kx-space-5: 20px;
  --kx-space-6: 24px;
  --kx-space-8: 32px;
  --kx-space-10: 40px;
  --kx-space-12: 48px;
  --kx-space-16: 64px;

  /* --- Motion --- */
  --kx-ease: cubic-bezier(0.2, 0.6, 0.2, 1);
  --kx-dur-fast: 120ms;
  --kx-dur: 180ms;
}

/* Reset-ish base */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--kx-font-sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--kx-text);
  background: var(--kx-bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}