/* ============================================================================
   MILLVATO — "Mill Control Room" design system
   Shared tokens + primitives for the landing page and the dashboard concept.
   Dark, operational, alive. Signal-green + grain-amber on near-black.
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400..800&family=Hanken+Grotesk:wght@400;500;600;700;800&family=Spline+Sans+Mono:wght@400;500;600;700&display=swap');

:root {
  /* --- surfaces ------------------------------------------------------------ */
  --bg:        #0B0F0D;   /* near-black canvas, faint green */
  --bg-2:      #0A0D0B;   /* deeper pockets */
  --panel:     #0F1A14;   /* primary panel */
  --panel-2:   #121A16;   /* raised panel */
  --card:      #16211B;   /* card on panel */
  --card-2:    #1B2A22;   /* hover / emphasis card */
  --grid:      rgba(236, 239, 233, 0.055);   /* hairline grid */
  --hair:      rgba(236, 239, 233, 0.10);    /* divider */
  --hair-2:    rgba(236, 239, 233, 0.16);    /* stronger divider */

  /* --- accents ------------------------------------------------------------- */
  --green:     #00E08A;   /* signal-green: live / good / primary */
  --green-2:   #4DF0AE;
  --green-ink: #04140D;   /* text on green */
  --green-glow: rgba(0, 224, 138, 0.35);
  --amber:     #FFB23E;   /* grain-amber: attention / warmth */
  --amber-2:   #FFC76E;
  --amber-glow: rgba(255, 178, 62, 0.30);
  --red:       #FF5C5C;   /* critical */
  --red-2:     #FF8A6A;
  --red-glow:  rgba(255, 92, 92, 0.28);
  --blue:      #5BC8FF;   /* secondary data series */
  --violet:    #B98CFF;   /* tertiary data series */

  /* --- text --------------------------------------------------------------- */
  --text:      #ECEFE9;
  --text-2:    #C3CCC4;
  --muted:     #7C8B82;
  --muted-2:   #7A8B81;

  /* --- type --------------------------------------------------------------- */
  --display: 'Bricolage Grotesque', 'Hanken Grotesk', system-ui, sans-serif;
  --body:    'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --mono:    'Spline Sans Mono', ui-monospace, 'SF Mono', monospace;

  /* --- geometry ----------------------------------------------------------- */
  --r-sm: 10px;
  --r:    16px;
  --r-lg: 22px;
  --r-pill: 999px;
  --maxw: 1240px;
  --gap: 20px;

  /* --- elevation ---------------------------------------------------------- */
  --shadow:   0 18px 50px -20px rgba(0,0,0,0.7);
  --shadow-lg:0 40px 90px -30px rgba(0,0,0,0.85);
  --ring:     inset 0 0 0 1px var(--hair);
  --depth:    0 24px 60px -28px rgba(0,0,0,0.8);   /* cinematic card lift */

  /* --- enrichment: layered gradients (stay within the palette) ------------- */
  --grad-green:  linear-gradient(135deg, var(--green) 0%, #00C7A6 120%);   /* green -> teal */
  --grad-amber:  linear-gradient(135deg, var(--amber) 0%, var(--amber-2) 120%);
  --grad-blue:   linear-gradient(135deg, var(--blue) 0%, var(--violet) 120%);  /* secondary data */
  --grad-violet: linear-gradient(135deg, var(--violet) 0%, var(--blue) 120%);
  --grad-panel:  linear-gradient(160deg, rgba(0,224,138,0.05) 0%, transparent 42%), var(--panel);

  /* --- enrichment: soft glows --------------------------------------------- */
  --blue-glow:   rgba(91, 200, 255, 0.30);
  --violet-glow: rgba(185, 140, 255, 0.30);
  --glow-green:  0 0 40px -8px var(--green-glow);
  --glow-amber:  0 0 40px -8px var(--amber-glow);
  --glow-blue:   0 0 40px -8px var(--blue-glow);
  --glow-violet: 0 0 40px -8px var(--violet-glow);

  /* --- motion ------------------------------------------------------------- */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur: .6s;
}

/* ============================================================================
   RESET / BASE
   ============================================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  font-feature-settings: "ss01","cv01";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1,h2,h3,h4 { font-family: var(--display); font-weight: 650; line-height: 1.02; margin: 0; letter-spacing: -0.02em; }
a { color: inherit; text-decoration: none; }
img, svg, canvas { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; }
::selection { background: var(--green); color: var(--green-ink); }

/* faint operational grid laid over the whole page background */
.bg-grid {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(circle at 50% 30%, #000 0%, transparent 78%);
          mask-image: radial-gradient(circle at 50% 30%, #000 0%, transparent 78%);
}

/* ============================================================================
   LAYOUT
   ============================================================================ */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.stack > * + * { margin-top: var(--gap); }

/* ============================================================================
   TYPE PRIMITIVES
   ============================================================================ */
.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.eyebrow--green { color: var(--green); }
.eyebrow--amber { color: var(--amber); }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; letter-spacing: -0.01em; }
.text-muted { color: var(--muted); }
.text-amber { color: var(--amber); }
.text-green { color: var(--green); }
.text-red   { color: var(--red); }

/* ============================================================================
   SURFACES
   ============================================================================ */
.panel {
  position: relative;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(0,224,138,0.04), transparent 45%),
    var(--panel);
  border: 1px solid var(--hair);
  border-radius: var(--r);
  box-shadow: var(--shadow);
}
.card {
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: var(--r);
}
.card--raised { background: var(--card-2); }

/* a glowing top accent line some panels carry */
.accent-top::before {
  content: ""; position: absolute; left: 16px; right: 16px; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--green), transparent);
  opacity: .5;
}

/* ============================================================================
   PILLS / BADGES / LIVE DOT
   ============================================================================ */
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  height: 30px; padding: 0 12px;
  border-radius: var(--r-pill);
  border: 1px solid var(--hair-2);
  background: rgba(255,255,255,0.02);
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em;
  color: var(--text-2); text-transform: uppercase;
}
.pill--green { color: var(--green); border-color: rgba(0,224,138,0.35); background: rgba(0,224,138,0.06); }
.pill--amber { color: var(--amber); border-color: rgba(255,178,62,0.35); background: rgba(255,178,62,0.07); }
.pill--red   { color: var(--red);   border-color: rgba(255,92,92,0.35);  background: rgba(255,92,92,0.07); }

.live-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 0 var(--green-glow);
  animation: pulse 2.2s var(--ease) infinite;
}
.live-dot--amber { background: var(--amber); box-shadow: 0 0 0 0 var(--amber-glow); }
.live-dot--red   { background: var(--red);   box-shadow: 0 0 0 0 var(--red-glow); }

@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 var(--green-glow); }
  70%  { box-shadow: 0 0 0 9px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* ============================================================================
   BUTTONS
   ============================================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 52px; padding: 0 26px;
  border-radius: var(--r-pill);
  border: 1px solid var(--hair-2);
  background: rgba(255,255,255,0.03);
  color: var(--text);
  font-family: var(--body); font-size: 16px; font-weight: 600;
  transition: transform .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.btn:hover { transform: translateY(-2px); border-color: var(--hair-2); background: rgba(255,255,255,0.06); }
.btn:active { transform: translateY(0); }
.btn--primary {
  background: var(--green); color: var(--green-ink); border-color: transparent;
  box-shadow: 0 10px 30px -8px var(--green-glow);
}
.btn--primary:hover { background: var(--green-2); box-shadow: 0 16px 40px -10px var(--green-glow); }
.btn:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }

/* ============================================================================
   SPARKLINE / DATA BARS (shared helpers; pages add specifics)
   ============================================================================ */
.spark { display: block; width: 100%; height: 28px; overflow: visible; }
.bar-track { height: 8px; border-radius: var(--r-pill); background: rgba(255,255,255,0.06); overflow: hidden; }
.bar-fill  { height: 100%; border-radius: var(--r-pill); background: var(--green); }

/* ============================================================================
   ACCESSIBILITY / MOTION
   ============================================================================ */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

/* skip link: hidden off-canvas until keyboard-focused */
.skip-link {
  position: fixed; top: -120px; left: 12px; z-index: 200;
  padding: 10px 16px; border-radius: var(--r-sm);
  background: var(--card); color: var(--text);
  border: 1px solid var(--hair-2); font-weight: 600;
  transition: top .2s var(--ease);
}
.skip-link:focus, .skip-link:focus-visible { top: 12px; outline: 2px solid var(--green); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .live-dot { animation: none !important; }
}