/* ============================================================
   EDDYFI · SENSOR NETWORKS — BRAND CORE
   ------------------------------------------------------------
   THE single source of truth shared by BOTH surfaces of the
   master design system:

     • Marketing / Editorial  → tokens/marketing layer
       (colors_and_type.css)  — decks, data sheets, collateral.
     • Product / UI           → tokens/app layer
       (ui_kits/web-app/styles.css) — webPIMS® & PC apps.

   Both layers @import THIS file first, then add only what is
   specific to their medium. Change a brand value here and it
   propagates everywhere.

   Reconciled from two source palettes:
     – Eddyfi PowerPoint theme ("Eddyfi Technologies" clrScheme)
     – microPIMS 2 print label (CMYK → sRGB)
     – webPIMS® product UI (slate ink + engineering blue)
   Rule of the house: blues + slate + grey do the work;
   Eddyfi orange is the single brand accent.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,600&family=Geist+Mono:wght@400;500;600&display=swap');

:root {
  /* ───────────────────────────────────────────────────────────
     1 · BRAND CORE COLORS  (identical across both surfaces)
     ─────────────────────────────────────────────────────────── */
  --eddyfi-dark-blue: #2B3B46;   /* PPT dk1 / label C79 M61 Y49 K50 — canonical brand ink */
  --eddyfi-orange:    #ED8B00;   /* PPT accent1 / label C5 M53 Y100 K0 — THE brand accent */
  --eddyfi-black:     #27251F;   /* PPT brand "Black" — warm near-black */
  --eddyfi-white:     #FFFFFF;

  /* Blues — the dominant family. ONE blue, three steps: every
     surface (logos, marketing, links, focus rings, active nav)
     uses sn-blue. The app layer aliases it as --blue / --blue-ink
     / --blue-soft; there is no separate "UI blue". */
  --sn-blue:        #1275BC;     /* Sensor Networks process blue — BRAND blue (label C86 M50 Y0 K0) */
  --sn-blue-deep:   #0F5E96;     /* darker step — hovers / depth / wordmark */
  --sn-blue-tint:   #E8F1F8;     /* pale blue wash — fills / callouts */

  --teal:           #479CA6;     /* PPT accent2 — sparing cool secondary */
  --teal-tint:      #E4F0F1;

  --orange-deep:    #C46F00;     /* pressed / hover on orange */
  --orange-tint:    #FDF0DC;     /* pale orange wash */

  /* ───────────────────────────────────────────────────────────
     2 · NEUTRALS — one cool grey ramp for the whole system.
     Sourced from the Eddyfi/print palette (cool, not warm).
     Body ink on both surfaces is --eddyfi-dark-blue; the ramp
     below covers everything lighter.
     ─────────────────────────────────────────────────────────── */
  --grey-900: #1B252C;           /* deepest slate (below dark-blue) */
  --grey-800: #243038;
  --grey-700: #41474C;
  --grey-600: #63666A;           /* PPT dk2 "Dark Grey" — body on light */
  --grey-500: #7E8185;
  --grey-400: #9A9DA1;
  --grey-300: #BBBCBC;           /* PPT "Light Grey" */
  --grey-200: #D6D6D6;           /* PPT lt2 — strong hairlines */
  --grey-100: #ECEEEF;           /* card borders, rules */
  --grey-075: #F0F2F3;
  --grey-050: #F4F5F6;           /* off-white page background */

  /* ───────────────────────────────────────────────────────────
     3 · SEMANTIC / STATUS  (canonical hues, agreed by both
     surfaces). The product UI adds -soft tints + dark variants;
     marketing uses the base hues for stat/feedback color.
     NOTE: orange is a BRAND accent, never a status color — use
     --warning (amber) for caution, not Eddyfi orange.
     ─────────────────────────────────────────────────────────── */
  --critical:      #C8424E;      /* ALARM — threshold breach. Red is ALWAYS alarm. */
  --critical-soft: #FBECEE;
  --warning:       #C68018;      /* WARNING — approaching threshold. Amber, distinct from brand orange. */
  --warning-soft:  #FBF1DF;
  --ok:            #2F8F5E;      /* OK — healthy / in-spec / online */
  --ok-soft:       #E5F3EC;
  --device:        #6E54C0;      /* DEVICE HEALTH — status pill only (battery/signal). Metric cells still use the red/amber severity scale. */
  --device-soft:   #ECE8F8;
  --stale:         #8B95A0;      /* offline / no-data / disabled */
  --info:          var(--sn-blue);

  /* ───────────────────────────────────────────────────────────
     4 · TYPOGRAPHY families & weights
     Montserrat for all display & UI text. Geist Mono for every
     number, ID, timestamp, and code token, system-wide
     (tabular figures). Headings 600/700; body 400; labels 500.
     ─────────────────────────────────────────────────────────── */
  --font-sans:    'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Montserrat', system-ui, sans-serif;
  --font-mono:    'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  --w-light: 300; /* @kind font */
  --w-regular: 400; /* @kind font */
  --w-medium: 500; /* @kind font */
  --w-semibold: 600; /* @kind font */
  --w-bold: 700; /* @kind font */
  --w-extrabold: 800; /* @kind font */

  /* ───────────────────────────────────────────────────────────
     5 · SPACING — 4pt base (shared)
     ─────────────────────────────────────────────────────────── */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;

  /* ───────────────────────────────────────────────────────────
     6 · RADII — crisp & restrained. The product UI uses the
     middle three (4 / 6 / 10); marketing adds a 2px hairline
     radius and the pill. All values agree across surfaces.
     ─────────────────────────────────────────────────────────── */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 10px;
  --r-pill: 999px;

  /* ───────────────────────────────────────────────────────────
     7 · ELEVATION — cool, low-opacity slate. Never colored.
     ─────────────────────────────────────────────────────────── */
  --shadow-sm: 0 1px 2px rgba(27,37,44,0.08);
  --shadow-md: 0 4px 14px rgba(27,37,44,0.10);
  --shadow-lg: 0 14px 40px rgba(27,37,44,0.14);
  --shadow-pop: 0 8px 24px rgba(27,37,44,0.12);   /* dropdowns / menus */
  --shadow-modal: 0 24px 64px rgba(27,37,44,0.22); /* modals */

  /* ───────────────────────────────────────────────────────────
     8 · SIGNAL — the ultrasound data ramp.
     Our data is acoustic. This is the ONE sequential scale for
     amplitude / echo-strength / thickness data: B-scans, C-scans,
     spectrograms, heatmaps, density plots. Deliberately contains
     no red, no amber and no brand orange, so a data surface can
     never be misread as a status colour. Low = cold & dark
     (no return signal), high = warm & bright (saturated echo).
     Use in order; never re-order, never substitute.
     ─────────────────────────────────────────────────────────── */
  --signal-0: #071A26;   /* no return / noise floor */
  --signal-1: #0F4A78;
  --signal-2: #1275BC;   /* = brand blue, the ramp's anchor */
  --signal-3: #3FA0B4;
  --signal-4: #94C7B0;
  --signal-5: #F2EBD3;   /* saturated echo — warm bone, not white */
  --signal-ramp: linear-gradient(90deg,
    var(--signal-0), var(--signal-1), var(--signal-2),
    var(--signal-3), var(--signal-4), var(--signal-5));

  /* Bipolar RF trace (an A-scan swings +/- about zero). Positive
     half-cycles ride the brand blue, negative on the teal. */
  --rf-pos:  var(--sn-blue);
  --rf-neg:  #127C8C;
  --rf-zero: var(--grey-300);          /* the zero-amplitude datum */

  /* The waveform motif — the system's signature graphic. A single
     decaying-echo trace, used as a rule, a section-header wash and
     the loading skeleton. Never decorative filler: one per view. */
  --wave-trace: var(--sn-blue);
  --wave-trace-dim: rgba(18,117,188,0.28);
  --wave-grid: rgba(43,59,70,0.10);    /* instrument graticule */

  /* ───────────────────────────────────────────────────────────
     9 · INDUSTRIAL — plant-floor vocabulary.
     Etched-nameplate surfaces and hazardous-area classification.
     Hazard chips are DELIBERATELY neutral steel, not status hues:
     an area classification is a fact about the plant, not an
     alarm about the asset.
     ─────────────────────────────────────────────────────────── */
  --plate-face: #DCE0E2;              /* brushed-steel nameplate face */
  --plate-etch: #3C464E;              /* engraved ink */
  --plate-edge: #B4BABE;
  --hazard-ink: var(--grey-800);
  --hazard-face: var(--grey-100);
  --hazard-edge: var(--grey-300);

  /* ───────────────────────────────────────────────────────────
     10 · MOTION — minimal, fast, one signature.
     The only signature transition in the system is the SWEEP: a
     single left-to-right pass, the way a UT gate sweeps a trace.
     Used for chart reveals and loading skeletons. Nothing else
     animates. No bounce, no loops on content, no parallax.
     ─────────────────────────────────────────────────────────── */
  --dur-1: 80ms; /* @kind other */
  --dur-2: 160ms; /* @kind other */
  --dur-3: 250ms; /* @kind other */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --sweep-dur: 1100ms; /* @kind other */
}

@keyframes sn-sweep { from { transform: translateX(-100%); } to { transform: translateX(200%); } }
@keyframes sn-trace { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 0ms; /* @kind other */ --dur-2: 0ms; /* @kind other */ --dur-3: 0ms; /* @kind other */ }
}