/* ==========================================================================
   foundry-theme.css — Farmer Diamonds Operations Portal · "Foundry" skin
   Base layer: palette tokens, self-hosted faces, atmosphere, holo-glass.
   Personas declare ONLY --accent / --deck-c (+ semantic overrides).
   Single deliberate dark theme: this is a control room, not a website.
   ========================================================================== */

/* ---- Self-hosted faces (variable woff2, latin subset, OFL) --------------
   PortalDisplay = Big Shoulders   — condensed industrial signage
   PortalBody    = Archivo         — grotesque workhorse, tabular figures
   PortalMono    = Red Hat Mono    — instrument data, chips, hashes        */
@font-face {
  font-family: 'PortalDisplay';
  src: url('./fonts/display.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'PortalBody';
  src: url('./fonts/body.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'PortalMono';
  src: url('./fonts/mono.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* void — carbon graphite, near-neutral so any deck hue can tint it */
  --bg: #08090d;
  --bg2: #0e1117;
  --panel: rgba(21, 26, 35, .58);
  --edge: #202836;
  --edge2: #334052;
  /* ink ramp */
  --ink: #e9edf3;
  --dim: #97a3b4;
  /* --faint: decorative/placeholder text ONLY (~3.4:1 on --bg, below AA) — never body copy */
  --faint: #5a6577;
  /* semantic state */
  --pos: #45e0a1;
  --neg: #ff5d68;
  --warn: #ffb454;
  /* faces */
  --disp: 'PortalDisplay', 'Arial Narrow', system-ui, sans-serif;
  --body: 'PortalBody', system-ui, 'Segoe UI', sans-serif;
  --mono: 'PortalMono', ui-monospace, 'Cascadia Mono', Menlo, monospace;
  /* holo-glass */
  --glass: rgba(255, 255, 255, .04);
  /* --glass-2: stronger glass tier for hover/active panel states (reserved) */
  --glass-2: rgba(255, 255, 255, .085);
  --radius: 10px;
  --maxw: 1500px;
}

/* ---- Atmosphere ---------------------------------------------------------
   1. crucible glow: the deck hue bleeding in from the top-right, like heat
      off a pour — this is how a deck "owns" its page without repainting it
   2. floor gradient: bg -> bg2 so long pages don't read as flat void
   3. scanline film: barely-there horizontal grain, keeps large dark fields
      from banding and gives the console its CRT undertone               */
html { background: var(--bg); }
html::before {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none; z-index: 9;
  background: repeating-linear-gradient(0deg,
    transparent 0 3px, rgba(0, 0, 0, .16) 3px 4px);
  opacity: .22;
}
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(1100px 700px at 72% -12%,
      color-mix(in oklab, var(--deck-c, #9fb0c4) 13%, transparent), transparent 70%),
    radial-gradient(900px 600px at -10% 110%,
      color-mix(in oklab, var(--deck-c, #9fb0c4) 5%, transparent), transparent 65%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg2) 120%);
  background-attachment: fixed;
}

/* ---- Base type ---------------------------------------------------------- */
h1, h2, h3 {
  font-family: var(--disp);
  font-weight: 600;
  letter-spacing: .035em;
  text-transform: uppercase;
  line-height: 1.12;
  margin: 0 0 .45em;
}
h1 { font-size: clamp(26px, 3.2vw, 40px); }
h2 { font-size: clamp(19px, 2.2vw, 26px); color: var(--ink); }
h3 { font-size: 15px; letter-spacing: .09em; color: var(--dim); }
p { margin: 0 0 1em; }
small { color: var(--dim); }
code, kbd, pre {
  font-family: var(--mono);
  font-size: .92em;
}
strong { font-weight: 600; }
::selection {
  background: color-mix(in oklab, var(--deck-c, var(--accent, #9fb0c4)) 35%, transparent);
}

/* Numbers on a console must rank and align at a glance */
table, .num, time, output {
  font-variant-numeric: tabular-nums;
}

/* ---- Holo-glass panel ---------------------------------------------------
   Signature: the "heat seam" — a 1px pour-line across the panel top that
   carries the deck hue and cools to nothing at the right edge.          */
.panel {
  position: relative;
  background:
    linear-gradient(180deg, var(--glass) 0%, transparent 42%),
    var(--panel);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  backdrop-filter: blur(9px) saturate(1.15);
  -webkit-backdrop-filter: blur(9px) saturate(1.15);
}
.panel::before {
  content: '';
  position: absolute;
  top: -1px; left: 8%; right: 30%;
  height: 1px;
  pointer-events: none;
  transition: right .2s ease;
  background: linear-gradient(90deg,
    transparent,
    color-mix(in oklab, var(--deck-c, var(--accent, #9fb0c4)) 65%, transparent) 35%,
    transparent);
}

/* ---- Scrollbars in the same material ------------------------------------ */
* { scrollbar-width: thin; scrollbar-color: var(--edge2) transparent; }

/* ---- Motion discipline --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}