/* ==========================================================================
   FabFlow — "Industrial Instrument"
   Cool-neutral ground, machined blue accent, condensed headings,
   tabular numerals, engineered 4-6px radii, crisp 1px rules.
   Loaded AFTER the compiled Tailwind bundle so the same declarations win
   on source order. Nothing here depends on !important.
   ========================================================================== */

:root {
  /* --- accent: the parent brand's amber/orange families re-pointed at
         machined blue, so every utility that used them inherits it ------ */
  --color-amber-300: #8FB2EF;
  --color-amber-400: #4C82DF;
  --color-amber-500: #1F5FD0;
  --color-amber-600: #1F5FD0;
  --color-orange-400: #3B78E0;
  --color-orange-500: #17509F;
  --color-orange-600: #16408F;
  --color-blue-400: #1F5FD0;

  /* --- neutral ramp, retuned for a light ground (all >= 4.5:1) -------- */
  --color-gray-300: #5C6673; /* 5.38:1 on #F4F6F8 */
  --color-gray-400: #525C68; /* 6.27:1 */
  --color-gray-500: #3D444D; /* 9.09:1 */
  --color-gray-600: #2C333C;
  --color-gray-700: #252B33;
  --color-gray-800: #1D2228;
  --color-gray-900: #171A1F;

  /* --- status, darkened for the light ground, and never alpha-faded:
         an up/down figure carries meaning, so it must stay readable ----- */
  --color-emerald-400: #12996A;
  --color-emerald-500: #0E6244;
  --color-emerald-600: #0F6B48; /* >= 5.62:1 on every ground used here */
  --color-red-400: #C8433A;
  --color-red-500: #A82A23;
  --color-red-600: #B02B24;     /* >= 5.62:1 */

  /* --- type ----------------------------------------------------------- */
  --font-sans: "Inter Tight", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* --- radii: engineered, never bubbly -------------------------------- */
  --radius-sm: 2px;
  --radius-md: 3px;
  --radius-lg: 4px;
  --radius-xl: 6px;
  --radius-2xl: 6px;
  --radius-3xl: 6px;
}

/* --------------------------------------------------------------------------
   Ground + base rhythm
   -------------------------------------------------------------------------- */
body {
  background: #F4F6F8;
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;      /* every figure lines up in a column */
  font-feature-settings: "tnum" 1, "cv05" 1;
  color: #171A1F;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.min-h-screen.bg-white { background-color: #F4F6F8; }

/* headings: semi-condensed industrial grotesque, tight, engineered */
h1, h2, h3, h4, h5, .font-black, .font-bold {
  font-family: "Barlow Semi Condensed", "Inter Tight", system-ui, sans-serif;
  letter-spacing: -0.015em;
}
h1, h2, h3, h4, h5 { font-weight: 700; }
h1 { letter-spacing: -0.022em; }
h2, h3 { letter-spacing: -0.012em; }
.font-black { font-weight: 900; }

/* wide-edges: nothing on the page may track looser than the floor */
.tracking-tight { letter-spacing: -0.025em; }

/* numerals in the data surfaces sit in a fixed-width column */
.font-mono {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* --------------------------------------------------------------------------
   Radius language — 4-6px, never a pill, never a bubble
   -------------------------------------------------------------------------- */
.rounded-full { border-radius: 4px; }
.rounded-\[15px\] { border-radius: 6px; }
.rounded-2xl { border-radius: 6px; }

/* indicator dots stay round; they are lamps, not tags */
.w-1\.5.h-1\.5.rounded-full,
.w-2.h-2.rounded-full { border-radius: 9999px; }

/* --------------------------------------------------------------------------
   Hairlines — crisp, not ghosted
   -------------------------------------------------------------------------- */
[class*="border-gray-900"] { border-color: rgba(23, 26, 31, 0.12); }

.bg-gray-900\/\[0\.01\] { background-color: rgba(23, 26, 31, 0.025); }
.bg-gray-900\/\[0\.015\] { background-color: rgba(23, 26, 31, 0.03); }
.bg-gray-900\/\[0\.02\] { background-color: rgba(23, 26, 31, 0.035); }
.bg-gray-900\/\[0\.03\] { background-color: rgba(23, 26, 31, 0.05); }
.bg-gray-900\/\[0\.04\] { background-color: rgba(23, 26, 31, 0.06); }
.bg-gray-900\/\[0\.05\] { background-color: rgba(23, 26, 31, 0.075); }

/* --------------------------------------------------------------------------
   Flat emphasis — gradient text is out
   -------------------------------------------------------------------------- */
.bg-clip-text.text-transparent {
  background-image: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: #1F5FD0;
  color: #1F5FD0;
}

/* primary actions: machined blue field, white label (5.82:1) */
.text-black { color: #FFFFFF; }
.bg-amber-500 { color: #FFFFFF; }
a.bg-gradient-to-r.from-amber-500,
[class*="from-amber-500"] .font-bold { color: #FFFFFF; }

/* solid, offset shadows — a zero-offset coloured halo is decoration */
.shadow-amber-500\/20,
.shadow-amber-600\/20,
.shadow-amber-600\/5 { --tw-shadow-color: rgba(23, 26, 31, 0.18); }

/* alpha-faded status text carries meaning; make it opaque and compliant */
.text-emerald-600\/80,
.text-emerald-600\/70 { color: #0F6B48; }
.text-red-600\/80 { color: #B02B24; }
.text-amber-600\/60,
.text-amber-600\/70 { color: #16408F; }

/* --------------------------------------------------------------------------
   Retire the ambient effects: glows, blueprint grid, spotlight, beam
   -------------------------------------------------------------------------- */
.blur-\[120px\],
.blur-\[150px\],
.blur-\[180px\] { display: none; }

.blueprint-grid { display: none; }

.spotlight::before { display: none; }

.border-beam::before { display: none; }

.card-glow:hover {
  border-color: rgba(31, 95, 208, 0.45);
  box-shadow: 0 1px 2px rgba(23, 26, 31, 0.08), 0 8px 20px -12px rgba(23, 26, 31, 0.35);
}

/* the scroll rail becomes a machined rule, not a brand gradient */
.scroll-progress { background: #1F5FD0; }

/* chrome bars are opaque plates, not glass */
.bg-white\/95 { background-color: #FFFFFF; }
.backdrop-blur-xl {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
nav.bg-white\/95 { border-bottom: 1px solid rgba(23, 26, 31, 0.12); }

/* the mock window's traffic lamps read as machined indicator chips */
.bg-\[\#ff5f57\],
.bg-\[\#febc2e\],
.bg-\[\#28c840\] { background-color: #C3CBD3; }

/* the dashboard frame: crisp plate with an offset shadow, no ambient wash */
[id="demo"] > .rounded-2xl {
  border-color: rgba(23, 26, 31, 0.14);
  box-shadow: 0 1px 2px rgba(23, 26, 31, 0.06), 0 24px 48px -32px rgba(23, 26, 31, 0.45);
}

/* the honesty caption is content, not fine print you cannot read */
[id="demo"] > p.text-center { font-size: 0.75rem; }

/* --------------------------------------------------------------------------
   Browser surfaces carry the system too
   -------------------------------------------------------------------------- */
::selection { background: rgba(31, 95, 208, 0.22); color: #171A1F; }

* {
  caret-color: #1F5FD0;
  scrollbar-color: #B8C0C9 #EDF0F3;
  scrollbar-width: thin;
}

*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: #EDF0F3; }
*::-webkit-scrollbar-thumb {
  background: #B8C0C9;
  border: 2px solid #EDF0F3;
  border-radius: 5px;
}
*::-webkit-scrollbar-thumb:hover { background: #99A3AD; }

:focus-visible {
  outline: 2px solid #1F5FD0;
  outline-offset: 2px;
  border-radius: 2px;
}

/* tabular figures on the dashboard readouts, without a mono costume */
[id="demo"] .font-bold,
[id="demo"] .font-medium { font-variant-numeric: tabular-nums; }

/* the "grain" layer stays as material, at a material weight */
.grain::after { opacity: 0.022; }

/* --------------------------------------------------------------------------
   Small screens: keep the dashboard usable when it is inside the hero
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  h1, .font-black { font-stretch: 90%; font-variation-settings: "wdth" 90; }
  [id="demo"] > .rounded-2xl { box-shadow: 0 1px 2px rgba(23, 26, 31, 0.06); }
}