/* =========================================================================
   ENCY — Colors & Type
   Source: bren d book PDF + product screenshots (ENCY CAM, Robot, Tuner)
   Brand: ENCY Software Ltd · Tagline: "Go beyond CAD/CAM"
   ========================================================================= */

/* ---- Fonts ---------------------------------------------------------------
   Brand spec: Montserrat (Bold/Semibold/Medium/Regular) + Hind Madurai
   (Regular/Light). Both available on Google Fonts. JetBrains Mono is used
   for technical mono content (G-code, coords, machine readouts) — this is
   our pragmatic substitution; flag for review.
--------------------------------------------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Hind+Madurai:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500;600&display=swap");

:root {
  /* ---- Brand palette (verbatim from brand book) ------------------------ */
  --ency-green-ocean: #00cb9a;   /* primary accent · gradients start */
  --ency-blue-sky:    #1269d9;   /* secondary · gradients end       */
  --ency-deep-blue:   #4046d2;   /* support · simulation visuals    */
  --ency-cobalt:      #6a12d9;   /* support · rare emphasis         */
  --ency-orange:      #ffb640;   /* warnings · highlights           */
  --ency-black:       #13151b;   /* canvas / logo on light          */
  --ency-graphite:    #252935;   /* primary surface in product      */
  --ency-paper:       #eeeff1;   /* surface on light backgrounds    */
  --ency-bone:        #fafafc;   /* highest light surface           */
  --ency-white:       #ffffff;

  /* ---- Signature gradient --------------------------------------------- */
  --ency-grad-brand: linear-gradient(90deg, #00cb9a 0%, #1269d9 100%);
  --ency-grad-brand-45: linear-gradient(45deg, #00cb9a 0%, #1269d9 100%);
  --ency-grad-toolpath: linear-gradient(90deg, #00cb9a 0%, #1269d9 50%, #6a12d9 100%);

  /* ---- Dark UI surfaces (product · primary brand context) ------------- */
  --bg-canvas:    #0d0f14;   /* 3D viewport background              */
  --bg-app:       #13151b;   /* app shell                            */
  --bg-surface-1: #1a1d24;   /* primary panel                        */
  --bg-surface-2: #20242d;   /* raised panel / popovers              */
  --bg-surface-3: #252935;   /* hover, selected row                  */
  --bg-input:     #0f1116;   /* numeric inputs, code editor          */
  --bg-overlay:   rgba(13, 15, 20, 0.72);

  /* ---- Borders (1px hairline, intentional) ---------------------------- */
  --border-faint:   rgba(255, 255, 255, 0.04);
  --border-subtle:  rgba(255, 255, 255, 0.08);
  --border-default: rgba(255, 255, 255, 0.12);
  --border-strong:  rgba(255, 255, 255, 0.20);
  --border-accent:  #00cb9a;

  /* ---- Foreground (text) ---------------------------------------------- */
  --fg-1: #eef0f3;   /* primary text                                   */
  --fg-2: #b9bfc9;   /* secondary text / labels                        */
  --fg-3: #7d8593;   /* tertiary / placeholders                        */
  --fg-4: #525a68;   /* disabled, axis labels                          */
  --fg-accent: #00cb9a;
  --fg-inverse: #13151b;

  /* ---- Semantic ------------------------------------------------------- */
  --success: #00cb9a;
  --info:    #1269d9;
  --warning: #ffb640;
  --danger:  #ff4d5e;

  /* Operation indicator chips used in the operations tree (T#3 dots) */
  --op-green:  #00cb9a;
  --op-blue:   #4ea6ff;
  --op-yellow: #ffd24a;
  --op-orange: #ff8a3d;
  --op-red:    #ff4d5e;
  --op-violet: #a36cff;

  /* ---- Type scale (per brand book: ≥12pt for headings, <12pt for body) */
  --font-display: "Montserrat", system-ui, sans-serif;
  --font-body:    "Hind Madurai", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --fs-display-xl: 64px;   /* hero on marketing slides            */
  --fs-display-l:  48px;
  --fs-display-m:  40px;   /* presentation title (brand book)     */
  --fs-h1:         32px;
  --fs-h2:         24px;
  --fs-h3:         20px;   /* subtitle (brand book)               */
  --fs-h4:         18px;
  --fs-body-l:     16px;   /* body (brand book)                   */
  --fs-body:       14px;
  --fs-body-s:     13px;   /* UI standard                         */
  --fs-caption:    12px;
  --fs-micro:      11px;   /* axis labels, hint chrome            */

  --lh-tight: 1.1;
  --lh-snug:  1.25;
  --lh-base:  1.45;
  --lh-loose: 1.6;

  --tracking-display: -0.02em;
  --tracking-body:    0;
  --tracking-eyebrow: 0.14em;
  --tracking-tab:     0.02em;

  /* ---- Spacing scale (4px base) --------------------------------------- */
  --space-0: 0;
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 6px;
  --space-4: 8px;
  --space-5: 12px;
  --space-6: 16px;
  --space-7: 20px;
  --space-8: 24px;
  --space-9: 32px;
  --space-10: 40px;
  --space-11: 48px;
  --space-12: 64px;

  /* ---- Radii (engineering-restrained) --------------------------------- */
  --radius-0: 0;
  --radius-1: 2px;   /* inputs, chips                                */
  --radius-2: 4px;   /* buttons, rows                                */
  --radius-3: 6px;   /* panels                                       */
  --radius-4: 8px;   /* cards, popovers                              */
  --radius-pill: 999px;

  /* ---- Shadow + elevation -------------------------------------------- */
  --shadow-1: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-2: 0 4px 12px rgba(0,0,0,0.35), 0 1px 2px rgba(0,0,0,0.5);
  --shadow-3: 0 12px 32px rgba(0,0,0,0.45), 0 2px 4px rgba(0,0,0,0.4);
  --shadow-glow-green: 0 0 0 1px rgba(0,203,154,0.4), 0 0 16px rgba(0,203,154,0.18);
  --shadow-glow-blue:  0 0 0 1px rgba(18,105,217,0.4), 0 0 16px rgba(18,105,217,0.18);

  /* ---- Motion --------------------------------------------------------- */
  --easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --easing-emphasized: cubic-bezier(0.3, 0, 0, 1);
  --duration-fast: 120ms;
  --duration-base: 180ms;
  --duration-slow: 320ms;
}

/* ---- Semantic type primitives ------------------------------------------ */
.ency-display, .ency-h1, .ency-h2, .ency-h3, .ency-h4,
.ency-eyebrow {
  font-family: var(--font-display);
  color: var(--fg-1);
}
.ency-body, .ency-caption, .ency-label { font-family: var(--font-body); color: var(--fg-1); }
.ency-mono { font-family: var(--font-mono); font-feature-settings: "tnum","zero","ss01"; }

.ency-display { font-size: var(--fs-display-m); font-weight: 600; line-height: var(--lh-tight); letter-spacing: var(--tracking-display); }
.ency-h1 { font-size: var(--fs-h1); font-weight: 600; line-height: var(--lh-snug); letter-spacing: var(--tracking-display); }
.ency-h2 { font-size: var(--fs-h2); font-weight: 600; line-height: var(--lh-snug); }
.ency-h3 { font-size: var(--fs-h3); font-weight: 500; line-height: var(--lh-snug); font-family: var(--font-body); }
.ency-h4 { font-size: var(--fs-h4); font-weight: 600; line-height: var(--lh-snug); }
.ency-eyebrow { font-size: var(--fs-micro); font-weight: 600; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--fg-3); }
.ency-body   { font-size: var(--fs-body); font-weight: 400; line-height: var(--lh-base); color: var(--fg-2); }
.ency-body-l { font-size: var(--fs-body-l); font-weight: 400; line-height: var(--lh-base); color: var(--fg-2); }
.ency-caption{ font-size: var(--fs-caption); font-weight: 400; line-height: var(--lh-snug); color: var(--fg-3); }
.ency-label  { font-size: var(--fs-caption); font-weight: 500; line-height: var(--lh-snug); color: var(--fg-2); }
.ency-mono-s { font-family: var(--font-mono); font-size: var(--fs-caption); }
.ency-mono-m { font-family: var(--font-mono); font-size: var(--fs-body-s); }

.ency-tab-label {
  font-family: var(--font-body);
  font-size: var(--fs-body-s);
  font-weight: 500;
  letter-spacing: var(--tracking-tab);
}

/* gradient text for hero brand moments */
.ency-grad-text {
  background: var(--ency-grad-brand);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}