/* ============================================================
   BORGES ENGENHARIA & AGRIMENSURA — Design Tokens
   Borges BIM Viewer · React · TypeScript · Three.js · Tailwind
   Minimalist, elegant, professional. Inspired by Notion,
   Linear, and Autodesk Construction Cloud.
   ============================================================ */

:root {
  /* ============================================================
     BRAND DIRECTION — refined to monochrome "ink"
     The Borges mark is black & white. The system foundation is
     ink-on-paper with sharp corners (Pininfarina-grade restraint);
     blue (#3b82f6) is the SOLE functional accent (active tool,
     selection, focus). The navy/* scale below is retained for
     legacy references in the original product code.
     ============================================================ */
  --ink:      #0a0a0a;   /* primary brand ink / logo */
  --ink-2:    #222220;   /* near-black text */
  --graphite: #5e5e58;   /* secondary text, rest-state icons */
  --mute:     #9a9a92;   /* tertiary text, eyebrows */
  --faint:    #c2c2ba;   /* hints, counts, disabled */
  --hair:     #ebebe6;   /* hairline borders, dividers */
  --hair-2:   #deded7;   /* stronger hairline */
  --paper:    #ffffff;   /* primary surface */
  --paper-2:  #faf9f6;   /* sunken / hover surface */

  /* -------- BRAND: Navy (legacy — original product code) --------
     borges-900 (#1e3a5f) appears throughout the shipped React app.
     Kept for fidelity when recreating the existing product as-is. */
  --navy-50:  #f1f5fa;
  --navy-100: #e0e9f3;
  --navy-200: #c2d3e6;
  --navy-300: #93afd0;
  --navy-400: #5b82ad;
  --navy-500: #3a5d8a;
  --navy-600: #2d4c74;
  --navy-700: #264066;
  --navy-800: #21385a;
  --navy-900: #1e3a5f;   /* brand navy · borges-900 */
  --navy-950: #142640;

  /* -------- BRAND: Accent Blue --------
     blue-500 (#3b82f6) is the interactive accent: active tools,
     selection highlight, focus rings, links. Maps to borges-500. */
  --blue-50:  #eff6ff;   /* borges-50 · drag/hover wash */
  --blue-100: #dbeafe;
  --blue-200: #bfdbfe;
  --blue-300: #93c5fd;
  --blue-400: #60a5fa;
  --blue-500: #3b82f6;   /* accent · borges-500 */
  --blue-600: #2563eb;
  --blue-700: #1d4ed8;

  /* Brand aliases (mirror the Tailwind `borges-*` tokens) */
  --borges-50:  var(--blue-50);
  --borges-500: var(--blue-500);
  --borges-900: var(--navy-900);

  /* -------- NEUTRALS: Slate --------
     The workhorse scale. UI chrome, text, borders, and the
     light app background all live here. */
  --slate-50:  #f8fafc;   /* app background */
  --slate-100: #f1f5f9;   /* hover fills, rails */
  --slate-200: #e2e8f0;   /* default borders, dividers */
  --slate-300: #cbd5e1;   /* disabled, dashed borders */
  --slate-400: #94a3b8;   /* tertiary text, captions, counts */
  --slate-500: #64748b;   /* secondary text, inactive icons */
  --slate-600: #475569;   /* body text */
  --slate-700: #334155;   /* primary text, headings */
  --slate-800: #1e293b;
  --slate-900: #0f172a;   /* maximum-contrast text */
  --white: #ffffff;

  /* -------- 3D VIEWER CANVAS --------
     Colors used inside the Three.js scene itself. */
  --viewer-bg:        #f5f5f5;   /* scene clear color */
  --viewer-grid-main: #d4d4d8;   /* grid major lines */
  --viewer-grid-sub:  #e4e4e7;   /* grid minor lines */
  --viewer-highlight: #3b82f6;   /* selected element (85% opacity) */

  /* -------- SEMANTIC --------
     Borrowed from Tailwind, used sparingly for status. */
  --success-500: #22c55e;
  --success-50:  #f0fdf4;
  --warning-500: #f59e0b;
  --warning-50:  #fffbeb;
  --danger-500:  #ef4444;
  --danger-50:   #fef2f2;

  /* -------- SURFACES & LINES --------- */
  --surface:        var(--white);
  --surface-sunken: var(--slate-50);
  --border:         var(--slate-200);
  --border-strong:  var(--slate-300);
  --divider:        var(--slate-100);

  /* -------- TEXT ROLES -------- */
  --fg1: var(--slate-700);   /* primary */
  --fg2: var(--slate-500);   /* secondary */
  --fg3: var(--slate-400);   /* tertiary / hint */
  --fg-on-navy: var(--white);
  --link: var(--blue-500);

  /* ============================================================
     TYPOGRAPHY — Inter
     ============================================================ */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
               Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo,
               Consolas, monospace;

  /* Weights — Inter ships 400/500/600/700 in this system */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold: 600;
  --fw-bold:    700;

  /* Type scale (px) — compact, UI-first. Inter, tight tracking. */
  --text-xs:   12px;  /* labels, counts, captions */
  --text-sm:   14px;  /* body, list items, controls */
  --text-base: 16px;  /* default */
  --text-lg:   18px;  /* card titles */
  --text-xl:   20px;  /* screen titles */
  --text-2xl:  24px;
  --text-3xl:  30px;
  --text-4xl:  36px;

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

  /* Tracking — Borges leans on tight tracking for headings and
     wide tracking for small uppercase eyebrows. */
  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.06em;   /* uppercase eyebrows / section labels */

  /* ============================================================
     RADII — refined direction favors SHARP / near-square corners.
     Buttons are pointed (0). Panels use a 2px whisper. Inputs 4px.
     8px is the maximum. (Legacy product code used rounded-lg/xl.)
     ============================================================ */
  --radius-none: 0px;   /* buttons, tool rail, badges */
  --radius-sm:   2px;   /* panels, cards, surfaces */
  --radius-md:   4px;   /* inputs, text fields */
  --radius-lg:   8px;   /* maximum — large containers only */
  --radius-xl:   12px;  /* legacy (original app dropzone) */
  --radius-2xl:  16px;  /* legacy */
  --radius-full: 9999px;

  /* ============================================================
     SHADOWS — whisper-quiet. Borges almost never elevates.
     ============================================================ */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 10px 28px rgba(15, 23, 42, 0.10);
  /* The bottom toolbar lifts UP, so its shadow points up */
  --shadow-up: 0 -2px 10px rgba(15, 23, 42, 0.06);
  --ring-focus: 0 0 0 3px rgba(59, 130, 246, 0.35);

  /* ============================================================
     SPACING — 4px base grid
     ============================================================ */
  --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;

  /* App chrome dimensions (from the codebase) */
  --topbar-h:    48px;   /* h-12 */
  --sidebar-w:   288px;  /* w-72 */
  --bottombar-h: 64px;

  /* Motion */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur:      200ms;
}

/* ============================================================
   SEMANTIC TYPE CLASSES
   ============================================================ */
.ds-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg2);
}
.ds-h1 {
  font-family: var(--font-sans);
  font-size: var(--text-3xl);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: var(--slate-800);
}
.ds-h2 {
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-snug);
  color: var(--slate-800);
}
.ds-h3 {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: var(--fw-semibold);
  line-height: var(--leading-snug);
  color: var(--slate-700);
}
.ds-body {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--fw-regular);
  line-height: var(--leading-normal);
  color: var(--fg1);
}
.ds-label {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--fg1);
}
.ds-caption {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--fw-regular);
  color: var(--fg3);
}
.ds-mono {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--fg2);
  font-variant-numeric: tabular-nums;
}