/* ============================================================
   Factoryfy Design System — Colors & Type
   Direction: Technical / instrumentation (Linear × oscilloscope)
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap");

:root {
  /* ---------- Color: Neutrals (light mode) ----------
     Slightly cool, paper-like off-white. Hairline borders. */
  --paper:        #FAFAF8;   /* page background */
  --surface:      #FFFFFF;   /* cards, elevated */
  --surface-2:   #F4F4F2;   /* subtle wells, code blocks */
  --surface-3:   #ECECEA;   /* hover wells */

  --ink:          #0B0C0E;   /* primary text */
  --ink-2:        #3B3D42;   /* secondary text */
  --ink-3:        #6B6E75;   /* tertiary text, captions */
  --ink-4:        #9CA0A8;   /* placeholder, disabled */

  --line:         #E4E4E1;   /* hairline borders */
  --line-strong:  #D2D2CE;   /* stronger borders */
  --line-soft:    #EFEFEC;   /* faintest dividers */

  /* ---------- Color: Signal (electric green) ----------
     Oscilloscope green. The single accent. Use sparingly. */
  --signal:        #16D77A;   /* primary accent */
  --signal-hover:  #1FE085;
  --signal-press:  #0FB965;
  --signal-soft:   #E4FBEF;   /* tinted backgrounds */
  --signal-ink:    #06120C;   /* on-signal text */
  --signal-glow:   rgba(22, 215, 122, 0.18);

  /* ---------- Color: Semantic ---------- */
  --ok:        #16D77A;   /* same as signal */
  --warn:      #E8A317;   /* amber */
  --warn-soft: #FBF1D9;
  --error:     #E5484D;
  --error-soft:#FBE5E6;
  --info:      #5B8DEF;
  --info-soft: #E6EEFC;

  /* ---------- Color: Chart palette ----------
     Categorical, optimized for time-series on light bg. */
  --chart-1: #16D77A;   /* signal green */
  --chart-2: #5B8DEF;   /* steel blue */
  --chart-3: #E8A317;   /* amber */
  --chart-4: #E5484D;   /* ember */
  --chart-5: #8B5CF6;   /* violet */
  --chart-6: #14B8A6;   /* teal */
  --chart-grid: #ECECEA;
  --chart-axis: #9CA0A8;

  /* ---------- Type: Families ---------- */
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ---------- Type: Scale (1.200 minor third, tight) ---------- */
  --fs-12: 0.75rem;     /* 12 — micro labels, caps */
  --fs-13: 0.8125rem;   /* 13 — table cells, captions */
  --fs-14: 0.875rem;    /* 14 — body small, UI default */
  --fs-15: 0.9375rem;   /* 15 — body */
  --fs-16: 1rem;        /* 16 — body large */
  --fs-18: 1.125rem;    /* 18 — lede */
  --fs-20: 1.25rem;     /* 20 — h4 */
  --fs-24: 1.5rem;      /* 24 — h3 */
  --fs-32: 2rem;        /* 32 — h2 */
  --fs-44: 2.75rem;     /* 44 — h1 */
  --fs-64: 4rem;        /* 64 — display */

  --lh-tight: 1.1;
  --lh-snug:  1.25;
  --lh-body:  1.5;
  --lh-loose: 1.7;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:    0.02em;
  --tracking-caps:    0.08em;

  /* ---------- Spacing (4px base) ---------- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-8:  32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;

  /* ---------- Radii ---------- */
  --r-0:  0px;
  --r-1:  2px;       /* hairline radius — chips, ticks */
  --r-2:  4px;       /* inputs, small buttons */
  --r-3:  6px;       /* default — buttons, badges */
  --r-4:  8px;       /* cards */
  --r-5:  12px;      /* large cards, modals */
  --r-full: 999px;

  /* ---------- Elevation ----------
     Sparingly used. Prefer hairline borders over shadows. */
  --shadow-0: none;
  --shadow-1: 0 1px 0 rgba(11, 12, 14, 0.04), 0 1px 2px rgba(11, 12, 14, 0.04);
  --shadow-2: 0 1px 0 rgba(11, 12, 14, 0.04), 0 4px 12px rgba(11, 12, 14, 0.06);
  --shadow-3: 0 2px 0 rgba(11, 12, 14, 0.04), 0 12px 32px rgba(11, 12, 14, 0.08);
  --shadow-pop: 0 0 0 1px rgba(11, 12, 14, 0.06), 0 8px 24px rgba(11, 12, 14, 0.08);
  --shadow-signal: 0 0 0 3px var(--signal-glow);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 280ms;
}

/* ============================================================
   Dark mode (secondary)
   ============================================================ */
[data-theme="dark"] {
  --paper:        #0A0B0D;
  --surface:      #111316;
  --surface-2:    #16191D;
  --surface-3:    #1D2126;

  --ink:          #F2F3F5;
  --ink-2:        #B5B9C0;
  --ink-3:        #7F858E;
  --ink-4:        #565B64;

  --line:         #22262C;
  --line-strong:  #2E333A;
  --line-soft:    #1A1D21;

  --signal:        #2EE085;
  --signal-hover:  #4AEB99;
  --signal-press:  #15C56C;
  --signal-soft:   #0E2A1B;
  --signal-ink:    #06120C;
  --signal-glow:   rgba(46, 224, 133, 0.25);

  --ok:       #2EE085;
  --warn:     #F4B33E;
  --warn-soft:#2A2113;
  --error:    #F26B6F;
  --error-soft:#2B1718;
  --info:     #7DA8FF;
  --info-soft:#13203B;

  --chart-grid: #22262C;
  --chart-axis: #565B64;

  --shadow-1: 0 1px 0 rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-2: 0 1px 0 rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.35);
  --shadow-3: 0 2px 0 rgba(0, 0, 0, 0.5), 0 12px 32px rgba(0, 0, 0, 0.45);
  --shadow-pop: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 8px 24px rgba(0, 0, 0, 0.4);
}

/* ============================================================
   Semantic type styles
   ============================================================ */
.t-display { font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-64); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); color: var(--ink); }
.t-h1      { font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-44); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); color: var(--ink); }
.t-h2      { font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-32); line-height: var(--lh-snug);  letter-spacing: var(--tracking-tight); color: var(--ink); }
.t-h3      { font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-24); line-height: var(--lh-snug);  letter-spacing: var(--tracking-tight); color: var(--ink); }
.t-h4      { font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-20); line-height: var(--lh-snug);  letter-spacing: var(--tracking-normal); color: var(--ink); }
.t-lede    { font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-18); line-height: var(--lh-body); color: var(--ink-2); }
.t-body    { font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-15); line-height: var(--lh-body); color: var(--ink); }
.t-body-sm { font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-14); line-height: var(--lh-body); color: var(--ink); }
.t-caption { font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-13); line-height: var(--lh-snug); color: var(--ink-3); }
.t-eyebrow { font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-12); line-height: 1; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ink-3); }
.t-mono    { font-family: var(--font-mono); font-weight: 400; font-size: var(--fs-13); line-height: var(--lh-snug); color: var(--ink); }
.t-mono-sm { font-family: var(--font-mono); font-weight: 400; font-size: var(--fs-12); line-height: var(--lh-snug); color: var(--ink-2); }
.t-code    { font-family: var(--font-mono); font-weight: 400; font-size: var(--fs-13); background: var(--surface-2); padding: 2px 6px; border-radius: var(--r-2); color: var(--ink); }
.t-num     { font-family: var(--font-mono); font-weight: 500; font-variant-numeric: tabular-nums; color: var(--ink); }