/* ============================================================
   fenro Design System — v1
   Single source of truth for all design tokens.
   Rule: never write inline styles. Use only vars from here.
   ============================================================ */

/* ====== TOKENS ====== */
:root {
  /* Backgrounds */
  --bg:         #ffffff;
  --bg-off:     #F8F9FA;

  /* Dark palette (for hero cards, CTA blocks, dark surfaces) */
  --dark:       #0A0B0B;
  --dark2:      #141416;

  /* Brand colors */
  --accent:     #0EAFD5;
  --pink:       #F045AA;
  --purple:     #7B4FD4;

  /* Text — light surfaces */
  --t-h:        #0A0B0B;   /* heading */
  --t-b:        #545454;   /* body */
  --t-m:        #A4A4A4;   /* muted */
  --t-s:        #8C8C8C;   /* secondary */

  /* Text — dark surfaces */
  --dt-h:       #ffffff;
  --dt-b:       rgba(255,255,255,0.62);
  --dt-m:       rgba(255,255,255,0.38);

  /* Borders */
  --border-l:   rgba(0,0,0,0.08);
  --border-d:   rgba(255,255,255,0.10);

  /* Shape */
  --r:          20px;
  --r-sm:       8px;
  --r-md:       12px;

  /* Typography */
  --font:       'Manrope', -apple-system, sans-serif;
  --font-body:  'Manrope', -apple-system, sans-serif;
}

/* ====== RESET ====== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body { font-family: var(--font-body); background: var(--bg); color: var(--t-b); overflow-x: hidden; }
a { text-decoration: none; color: inherit; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }