/* =========================================================================
   FACTIS DESIGN SYSTEM — Colors + Typography
   "Manufacturing Intelligence for the Modern Factory"
   Brand: Factis (a solution by eLT Edge)
   ========================================================================= */

/* ---- Webfonts (Google Fonts) -----------------------------------------------
   Heading: Sora — wide, geometric, slightly industrial; matches the deck's
            heavy display setting for the FACTIS wordmark and section heads.
   Body:    Inter — humanist, neutral, optimised for UI/dashboards.
   Mono:    JetBrains Mono — for SKUs, machine IDs, code/data.
   FLAG: real Factis assets may use a custom or licensed typeface; substitute
   the original .ttf files into /fonts/ if available and update the @font-face
   rules below.
--------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* ====================================================================
     COLOR TOKENS — Base palette
     Pulled from the Factis deck: deep navy field, cyan/sky accents
     for headings + section identity, signal yellow/amber for emphasis,
     status greens/reds/oranges for live machine data.
     ==================================================================== */

  /* Navy field (background + surfaces) */
  --navy-950: #02103D;  /* deepest — full-bleed slide background */
  --navy-900: #03174A;  /* base background */
  --navy-800: #0A2470;  /* card surface (raised on navy-900) */
  --navy-700: #0F2D8A;  /* card hover / pressed */
  --navy-600: #1F4FA8;  /* card border, hairlines on dark */
  --navy-500: #2E5BBF;  /* divider / focus halo */

  /* Cyan / sky — primary brand accent (section heads, wordmark accent) */
  --cyan-300: #A6D5F5;  /* light: subheads, hover text */
  --cyan-400: #6FC3FF;  /* mid: secondary accent */
  --cyan-500: #3FA9F5;  /* PRIMARY brand cyan */
  --cyan-600: #2389D6;  /* pressed cyan, link visited */
  --cyan-700: #1466A8;  /* dark cyan for borders on light bg */

  /* Amber / signal yellow — emphasis, callouts, CTA */
  --amber-300: #FFD965;
  --amber-400: #FFC93C;
  --amber-500: #FFB800;  /* PRIMARY emphasis yellow */
  --amber-600: #E09E00;
  --amber-700: #B07A00;

  /* Status colors — live machine states */
  --status-running: #22C55E;     /* green — running, on-target */
  --status-running-soft: #14532D;/* deep green, fill behind running text */
  --status-idle: #FFB800;        /* amber — idle, waiting */
  --status-down: #EF4444;        /* red — downtime / fault */
  --status-down-soft: #4C1A1A;
  --status-warning: #F97316;     /* orange — micro-stoppage */
  --status-info: #3FA9F5;        /* cyan — info / live feed */

  /* Neutral ramp (for light contexts: docs, marketing pages) */
  --white: #FFFFFF;
  --neutral-50: #F7F9FC;
  --neutral-100: #EEF2F8;
  --neutral-200: #D9E1EF;
  --neutral-300: #B8C4DA;
  --neutral-400: #8A99B5;
  --neutral-500: #5E6E8C;
  --neutral-600: #3F4D6A;
  --neutral-700: #29344A;
  --neutral-800: #18213A;
  --neutral-900: #0B132B;

  /* ====================================================================
     SEMANTIC TOKENS — use these in product code
     ==================================================================== */
  --bg-base:        var(--navy-900);
  --bg-raised:      var(--navy-800);
  --bg-overlay:     rgba(2, 16, 61, 0.72);

  --fg-1:           var(--white);          /* primary text on dark */
  --fg-2:           #C8D4EA;               /* secondary text on dark */
  --fg-3:           #8AA0C4;               /* tertiary / labels */
  --fg-muted:       #5E7399;
  --fg-inverse:     var(--neutral-900);    /* text on light bg */

  --accent:         var(--cyan-500);
  --accent-soft:    rgba(63, 169, 245, 0.16);
  --emphasis:       var(--amber-500);
  --emphasis-soft:  rgba(255, 184, 0, 0.14);

  --border-1:       rgba(255, 255, 255, 0.08);
  --border-2:       var(--navy-600);
  --border-strong:  var(--cyan-500);

  /* ====================================================================
     TYPOGRAPHY — font stacks
     ==================================================================== */
  --font-display: 'Sora', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* Type scale (rem-based, 16px root) */
  --fs-display-xl: 5.5rem;   /* 88px — wordmark, hero */
  --fs-display-l:  4rem;     /* 64px — slide titles */
  --fs-display-m:  3rem;     /* 48px — section opener */
  --fs-h1:         2.25rem;  /* 36px */
  --fs-h2:         1.75rem;  /* 28px */
  --fs-h3:         1.375rem; /* 22px */
  --fs-h4:         1.125rem; /* 18px */
  --fs-body:       1rem;     /* 16px */
  --fs-small:      0.875rem; /* 14px */
  --fs-micro:      0.75rem;  /* 12px — labels, captions */
  --fs-stat-xl:    5rem;     /* 80px — big % stats */
  --fs-stat-l:     3.5rem;   /* 56px — kpi cards */

  /* Line heights */
  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.45;
  --lh-relaxed: 1.6;

  /* Letter spacing */
  --ls-tight:   -0.02em;
  --ls-normal:  0;
  --ls-wide:    0.04em;
  --ls-eyebrow: 0.12em;  /* ALL-CAPS eyebrows */

  /* ====================================================================
     SHAPE & ELEVATION
     ==================================================================== */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;   /* default card radius */
  --radius-xl: 20px;
  --radius-2xl: 28px;
  --radius-pill: 999px;

  /* Shadows — soft, used sparingly on dark. Stronger on light bg pages. */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 18px 40px rgba(0, 0, 0, 0.45);
  --shadow-glow-cyan:  0 0 0 1px rgba(63, 169, 245, 0.4), 0 0 24px rgba(63, 169, 245, 0.2);
  --shadow-glow-amber: 0 0 0 1px rgba(255, 184, 0, 0.5), 0 0 24px rgba(255, 184, 0, 0.18);
  --shadow-glow-green: 0 0 0 1px rgba(34, 197, 94, 0.5), 0 0 24px rgba(34, 197, 94, 0.22);

  /* ====================================================================
     SPACING SCALE (4px 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;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;
}

/* =========================================================================
   SEMANTIC TYPE STYLES
   Apply these classes (or copy the rules) for the canonical Factis look.
   ========================================================================= */

.factis-base, body.factis {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--fg-1);
  background: var(--bg-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'ss01', 'cv02', 'cv11';
}

.factis-display-xl, h1.factis-hero {
  font-family: var(--font-display);
  font-size: var(--fs-display-xl);
  font-weight: 800;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  text-transform: uppercase;
  color: var(--white);
}

.factis-display-l, h1.factis-section {
  font-family: var(--font-display);
  font-size: var(--fs-display-l);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  text-transform: uppercase;
  color: var(--cyan-500);
}

.factis-display-m, h2.factis-section {
  font-family: var(--font-display);
  font-size: var(--fs-display-m);
  font-weight: 700;
  line-height: var(--lh-snug);
  color: var(--white);
}

h1, .factis-h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: 700;
  line-height: var(--lh-snug);
  color: var(--white);
}

h2, .factis-h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: var(--lh-snug);
  color: var(--white);
}

h3, .factis-h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: var(--lh-snug);
  color: var(--white);
}

h4, .factis-h4 {
  font-family: var(--font-body);
  font-size: var(--fs-h4);
  font-weight: 600;
  line-height: var(--lh-normal);
  color: var(--white);
}

p, .factis-p {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
  text-wrap: pretty;
}

.factis-eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--cyan-500);
}

.factis-label {
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--fg-3);
}

.factis-stat {
  font-family: var(--font-display);
  font-size: var(--fs-stat-xl);
  font-weight: 700;
  line-height: 1;
  color: var(--amber-500);
  letter-spacing: var(--ls-tight);
}

.factis-stat-label {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--fg-2);
  line-height: var(--lh-snug);
}

code, .factis-mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  color: var(--cyan-300);
}

/* Emphasis helpers — used heavily in deck headlines */
.factis-emphasis { color: var(--amber-500); }
.factis-accent   { color: var(--cyan-500); }

/* Underline rule — the yellow stroke under section titles */
.factis-underline {
  position: relative;
  padding-bottom: 0.4em;
}
.factis-underline::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 5ch;
  height: 4px;
  background: var(--amber-500);
  border-radius: 2px;
}