/* ============================================================
   KONEKT BY NEWFORMA — Colors & Type foundation
   Source of truth: BIMTrackReactComponents/src/themes/*
   (Colors.ts, Fonts.ts, ComponentColors.ts, Metrics.ts)
   Root font size in product is 10px (rem = px/10). Tokens below
   are expressed in px for portability; the product divides by 10.
   ============================================================ */

/* ----- Webfont: Circular Std (brand typeface) ----- */
@font-face {
  font-family: "CircularStd";
  src: url("../assets/fonts/circular-std-book.otf") format("opentype");
  font-weight: 450;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "CircularStd";
  src: url("../assets/fonts/circular-std-book-italic.otf") format("opentype");
  font-weight: 450;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "CircularStd";
  src: url("../assets/fonts/circular-std-medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "CircularStd";
  src: url("../assets/fonts/circular-std-medium-italic.otf") format("opentype");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "CircularStd";
  src: url("../assets/fonts/circular-std-bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "CircularStd";
  src: url("../assets/fonts/circular-std-bold-italic.otf") format("opentype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "CircularStd";
  src: url("../assets/fonts/circular-std-black.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "CircularStd";
  src: url("../assets/fonts/circular-std-black-italic.otf") format("opentype");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ========== COLOR — PRIMARY (Konekt blue) ========== */
  --primary-100: #eaeef3;
  --primary-200: #c9d7ed;
  --primary-300: #98b8ee;
  --primary-400: #72a1f1;
  --primary-500: #4485f1;  /* brand blue — primary actions, links, focus */
  --primary-600: #396fc8;
  --primary-700: #285195;
  --primary-800: #18315c;

  /* ========== COLOR — SECONDARY (purple, used for AI) ========== */
  --secondary-100: #efe3f7;
  --secondary-200: #e2b8fa;
  --secondary-300: #ce89f7;
  --secondary-400: #af49eb;
  --secondary-500: #8720c4;  /* AI features, premium accents */
  --secondary-600: #651693;
  --secondary-700: #471167;
  --secondary-800: #260a37;

  /* ========== COLOR — GREY (neutral ramp) ========== */
  --grey-50:  #f6f6f6;
  --grey-100: #eeeeee;
  --grey-200: #e4e4e4;
  --grey-300: #d2d2d2;
  --grey-400: #b8b8b8;
  --grey-500: #909090;
  --grey-600: #676767;
  --grey-700: #3e3e3e;
  --grey-800: #2a2a2a;
  --grey-900: #1a1a1a;

  /* ========== COLOR — SEMANTIC ========== */
  --warning-100: #fff9ed; --warning-200: #fff1d7; --warning-300: #ffe4af;
  --warning-400: #ffcf74; --warning-500: #ffbb38; --warning-600: #b38327;
  --warning-700: #664b16; --warning-800: #33250b;

  --error-100: #fbe9e9; --error-200: #f9d0d0; --error-300: #f2a2a2;
  --error-400: #e95c5c; --error-500: #df1616; --error-600: #9c0f0f;
  --error-700: #590909; --error-800: #2d0404;

  --success-100: #ebf1ed; --success-200: #d5e7da; --success-300: #a2d1af;
  --success-400: #52c770; --success-500: #20c443; --success-600: #11832f;
  --success-700: #055720; --success-800: #00230c;

  /* ========== COLOR — BASE ========== */
  --black: #000000;
  --white: #ffffff;
  --text: #646464;          /* default body text (lean button, captions) */

  /* ========== SEMANTIC ROLES ========== */
  --fg-1: var(--grey-900);  /* primary text / headings */
  --fg-2: var(--grey-800);  /* body / value text */
  --fg-3: var(--grey-600);  /* secondary text */
  --fg-4: var(--grey-500);  /* placeholder, help text, muted */
  --bg-app: var(--grey-50); /* light app canvas */
  --bg-surface: var(--white);
  --bg-subtle: var(--grey-50);
  --border-subtle: var(--grey-200);
  --border-default: var(--grey-300);
  --border-strong: var(--grey-400);
  --focus-ring: var(--primary-500);
  --link: var(--primary-500);

  /* Dark surfaces (sidebar nav, 3D viewer toolbar) */
  --dark-bg: var(--grey-800);      /* #2a2a2a sidebar */
  --dark-bg-deep: var(--grey-900); /* viewer chrome */
  --dark-fg: var(--grey-100);
  --dark-fg-muted: var(--grey-500);
  --dark-hover: var(--grey-700);
  --dark-border: var(--grey-700);

  /* AI gradient (brand octagon) */
  --brand-gradient: linear-gradient(135deg, #004f9f 0%, #12489a 21%, #42348e 63%, #702283 100%); /* @kind color */
  --ai-gradient: linear-gradient(135deg, #4485f1 0%, #8720c4 100%); /* @kind color */

  /* ========== TYPE ========== */
  --font-sans: "CircularStd", "Circular Std", system-ui, -apple-system, "Segoe UI", sans-serif;

  --weight-book: 450;     /* body */
  --weight-medium: 500;   /* headings, emphasis, buttons-ish */
  --weight-bold: 700;     /* labels, captions */
  --weight-black: 900;

  /* Type scale (px). Line-height 100% on display, 1.43 on body. */
  --fs-h1: 32px;   /* Headings */
  --fs-h2: 24px;
  --fs-h3: 19px;   /* Sub Heading */
  --fs-h4: 16px;
  --fs-body-lg: 16px;  /* Body Large — intros */
  --fs-body: 14px;     /* Body — most common */
  --fs-small: 12px;    /* Small — meta, tags */
  --fs-caption: 11px;  /* Caption — uppercased labels */

  --lh-tight: 1; /* @kind font */
  --lh-snug: 1.2; /* @kind font */
  --lh-body: 1.4285714;  /* @kind font */

  /* ========== SPACING (8px base; padding & spacing scales) ========== */
  --space-2: 2px;
  --space-4: 4px;
  --space-8: 8px;
  --space-16: 16px;  /* small padding */
  --space-24: 24px;  /* medium padding */
  --space-32: 32px;  /* large padding */
  --space-48: 48px;  /* small spacing */
  --space-64: 64px;  /* medium spacing */
  --space-96: 96px;  /* large spacing */

  /* ========== RADIUS ========== */
  --radius-sm: 4px;   /* default — buttons, inputs, tags, cards */
  --radius-md: 8px;
  --radius-lg: 16px;  /* AI cards, modals */
  --radius-pill: 999px;

  /* ========== ELEVATION (from Metrics.ts) ========== */
  --elevation-lowest: 0 0 6px 0 rgba(0,0,0,0.04), 0 2px 6px 0 rgba(0,0,0,0.1);
  --elevation-low:    0 0 6px 0 rgba(0,0,0,0.04), 0 10px 15px 0 rgba(0,0,0,0.1);
  --elevation-medium: 0 0 6px 0 rgba(0,0,0,0.04), 0 10px 30px 0 rgba(0,0,0,0.1);
  --elevation-high:   0 0 6px 0 rgba(0,0,0,0.04), 0 16px 60px 0 rgba(0,0,0,0.1);
  --elevation-hover-lowest: 0 10px 15px 0 rgba(0,0,0,0.2);
  --elevation-hover-low:    0 10px 30px 0 rgba(0,0,0,0.2);
  --elevation-hover-medium: 0 16px 60px 0 rgba(0,0,0,0.2);
  --elevation-hover-high:   0 24px 120px 0 rgba(0,0,0,0.2);
  /* common card shadow seen in product */
  --shadow-card: 0 2px 4px 0 rgba(0,0,0,0.097);

  /* ========== MOTION ========== */
  --motion-quick: 0.1s; /* @kind other */
  --motion-normal: 0.2s; /* @kind other */
  --motion-full: 0.3s; /* @kind other */
  --ease: ease-out; /* @kind other */
  --transition-button: all 0.15s ease-out; /* @kind other */

  /* ========== Z-INDEX ========== */
  --z-important: 5; /* @kind other */
  --z-overlay: 35; /* @kind other */
  --z-modal: 2000; /* @kind other */
  --z-max: 3000; /* @kind other */
  --z-tooltip: 900000; /* @kind other */
}

/* ============================================================
   SEMANTIC TYPE CLASSES
   ============================================================ */
.kx-h1 { font-family: var(--font-sans); font-weight: var(--weight-medium); font-size: var(--fs-h1); line-height: var(--lh-tight); color: var(--fg-1); }
.kx-h2 { font-family: var(--font-sans); font-weight: var(--weight-medium); font-size: var(--fs-h2); line-height: var(--lh-snug); color: var(--fg-1); }
.kx-h3 { font-family: var(--font-sans); font-weight: var(--weight-bold); font-size: var(--fs-h3); line-height: var(--lh-snug); color: var(--fg-1); }
.kx-h4 { font-family: var(--font-sans); font-weight: var(--weight-bold); font-size: var(--fs-h4); line-height: var(--lh-snug); color: var(--fg-1); }
.kx-body-lg { font-family: var(--font-sans); font-weight: var(--weight-book); font-size: var(--fs-body-lg); line-height: var(--lh-body); color: var(--fg-2); }
.kx-body { font-family: var(--font-sans); font-weight: var(--weight-book); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg-2); }
.kx-small { font-family: var(--font-sans); font-weight: var(--weight-book); font-size: var(--fs-small); line-height: var(--lh-body); color: var(--fg-3); }
.kx-caption { font-family: var(--font-sans); font-weight: var(--weight-bold); font-size: var(--fs-caption); line-height: var(--lh-snug); letter-spacing: 1px; text-transform: uppercase; color: var(--fg-3); }
.kx-link { color: var(--link); text-decoration: none; cursor: pointer; }
.kx-link:hover { text-decoration: underline; }

/* Konekt icon helper — inline-SVG loader.
   Markup: <i class="kxi" data-icon="assets/icons/ui/add.svg" style="color:var(--primary-500)"></i>
   The kx-icons.js loader fetches the SVG and injects it inline so `currentColor` tints it.
   Size with --sz (default 16). */
.kxi {
  display: inline-flex;
  width: var(--sz, 16px);
  height: var(--sz, 16px);
  flex: none;
  align-items: center;
  justify-content: center;
  color: inherit;
}
.kxi > svg { width: 100%; height: 100%; display: block; }
.kxi-24 { --sz: 24px; }
.kxi-20 { --sz: 20px; }
.kxi-32 { --sz: 32px; }