/* ============================================================
   Tectus — Webfonts
   UI / Body / Headings : Inter   (clean, minimal, highly legible —
                                   the primary family, Webflow-friendly)
   Numerals / Mono      : JetBrains Mono (tabular times, counts, IDs)
   Loaded from Google Fonts. Replace with self-hosted @font-face if a
   licensed brand face becomes available. The TECTUS wordmark itself is
   supplied as artwork in assets/ (tectus-mark / tectus-lockup).
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');
/* ============================================================
   Tectus — Color tokens  (dark-first, per Tectus website spec)
   Signature look: dark background, dark cards, subtle borders,
   white typography, a single gold accent. One accent color only.
   ============================================================ */
:root {
  /* ---- Raw scale ---- */
  --ink-900: #0B0B0D;   /* background base */
  --ink-800: #121214;   /* surface / cards */
  --ink-700: #17171A;   /* surface hover */
  --ink-600: #1F1F22;   /* border / raised edge */
  --ink-500: #2A2A2E;   /* border light / steel */

  /* ---- Neutral text ramp ---- */
  --white:     #FFFFFF;  /* primary text */
  --gray-400:  #A1A1AA;  /* secondary text */
  --gray-500:  #71717A;  /* muted text */

  /* ---- Gold accent (single accent color) ---- */
  --gold-500: #D4AF37;   /* primary */
  --gold-600: #C29D2A;   /* hover (darken on solid fills) */
  --gold-300: #E2C86A;   /* light highlight / gold text on dark */
  --gold-wash: rgba(212,175,55,0.12); /* soft transparent gold fill */

  /* ---- Status (functional only, used sparingly) ---- */
  --green-500: #22C55E;  /* success */
  --amber-500: #F59E0B;  /* warning */
  --red-500:   #EF4444;  /* danger */
  --blue-500:  #3B82F6;  /* info */

  /* ============================================================
     Semantic aliases — reference these in components
     ============================================================ */
  --color-bg:            var(--ink-900);
  --color-surface:       var(--ink-800);
  --color-surface-2:     var(--ink-700);   /* hover / slightly raised */
  --color-surface-3:     var(--ink-600);   /* elevated chips / wells */

  --color-text:          var(--white);
  --color-text-muted:    var(--gray-400);
  --color-text-faint:    var(--gray-500);

  --color-border:        var(--ink-600);   /* #1F1F22 — subtle 1px line */
  --color-border-strong: var(--ink-500);   /* #2A2A2E — hover/focus edge */
  --color-divider:       #18181B;          /* quiet row/section divider */

  --color-primary:       var(--gold-500);
  --color-primary-hover: var(--gold-600);  /* solid-fill hover (darken) */
  --color-primary-light: var(--gold-300);  /* gold text/highlight on dark */
  --color-primary-soft:  var(--gold-wash);
  --color-on-primary:    #0B0B0D;          /* text on a solid gold fill */

  --color-success:       var(--green-500);
  --color-warning:       var(--amber-500);
  --color-error:         var(--red-500);
  --color-info:          var(--blue-500);

  --color-success-fg:    #4ADE80;  /* legible green text on dark */
  --color-warning-fg:    #FBBF24;
  --color-error-fg:      #F87171;
  --color-info-fg:       #60A5FA;

  --color-success-soft:  rgba(34,197,94,0.14);
  --color-warning-soft:  rgba(245,158,11,0.14);
  --color-error-soft:    rgba(239,68,68,0.15);
  --color-info-soft:     rgba(59,130,246,0.14);

  /* Inverted (high-contrast white) surface for alt buttons */
  --color-invert:        var(--white);
  --color-on-invert:     #0B0B0D;

  /* Focus ring */
  --ring: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--gold-500);
}
/* ============================================================
   Tectus — Typography tokens
   Executive · operational · precise · expensive · contemporary.
   Primary family = Inter (headings + UI + body). Clean, minimal, legible.
   Mono = JetBrains Mono for times, counts, IDs (tabular).
   ============================================================ */
:root {
  /* ---- Families ---- */
  --font-display: 'Inter', system-ui, -apple-system, sans-serif;
  --font-sans:    'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* ---- Weights ---- */
  --fw-light:    300; /* @kind font */
  --fw-regular:  400; /* @kind font */
  --fw-medium:   500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold:     700; /* @kind font */
  --fw-black:    700; /* @kind font */

  /* ---- Type scale (px) ---- */
  --fs-hero:      80px;  /* hero display 64–88 desktop */
  --fs-page:      48px;  /* page title 42–56 */
  --fs-section:   34px;  /* section title 30–40 */
  --fs-card:      22px;  /* card title 20–24 */
  --fs-body-lg:   20px;  /* large body / hero descriptions */
  --fs-body:      16px;
  --fs-body-sm:   14px;
  --fs-meta:      13px;  /* metadata 12–13 */
  --fs-eyebrow:   12px;  /* eyebrow label 11–13 uppercase */
  --fs-label:     12px;  /* table label */
  --fs-kpi:       36px;  /* numeric KPI 28–40 */

  /* ---- Semantic heading scale (element h1–h6, responsive desktop→mobile) ---- */
  --fs-display: clamp(44px, 6vw, 80px);  /* @kind font */
  --fs-h1:      clamp(40px, 5vw, 64px);  /* @kind font */
  --fs-h2:      clamp(32px, 4vw, 48px);  /* @kind font */
  --fs-h3:      clamp(24px, 2.8vw, 32px);/* @kind font */
  --fs-h4:      24px;                    /* @kind font */
  --fs-h5:      18px;                    /* @kind font */
  --fs-h6:      14px;                    /* @kind font */

  /* Fluid hero / page for marketing */
  --fs-hero-fluid: clamp(44px, 6vw, 80px); /* @kind font */
  --fs-page-fluid: clamp(32px, 4.4vw, 52px); /* @kind font */
  --fs-section-fluid: clamp(26px, 3vw, 36px); /* @kind font */

  /* ---- Line heights ---- */
  --lh-hero:    1.1;    /* @kind font */
  --lh-heading: 1.15;   /* @kind font */
  --lh-snug:    1.3;    /* @kind font */
  --lh-body:    1.7;    /* @kind font */

  /* ---- Letter spacing ---- */
  --ls-hero:    -0.03em;   /* @kind font */
  --ls-heading: -0.02em;   /* @kind font */
  --ls-normal:  0;         /* @kind font */
  --ls-label:   0.08em;    /* @kind font */
  --ls-caps:    0.12em;    /* @kind font */
}

/* ---- Optional ergonomic helpers (consumers may use directly) ---- */
.t-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--color-text-faint);
}
.t-num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}
/* ============================================================
   Tectus — Spacing scale  (8px base)
   4–8 tight inline · 12–16 small components · 24–32 card internals
   40–64 group spacing · 80–120 section spacing
   ============================================================ */
:root {
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-30: 120px;

  /* ---- Layout ---- */
  --container-max:  1280px;  /* max content width */
  --container:      1120px;  /* standard content width */
  --reading:        680px;   /* prose / legal reading width */

  --gutter-mobile:  24px;
  --gutter-tablet:  40px;
  --gutter-desktop: 64px;

  --section-y:      96px;   /* default section vertical rhythm 72–120 */
  --section-y-lg:   120px;
}
/* ============================================================
   Tectus — Radius, borders & shadows
   1px borders only · low-contrast warm-neutral lines · subtle premium depth.
   No glow. No blur-heavy blobs. Surface layering does most of the work.
   ============================================================ */
:root {
  /* ---- Radius ---- */
  --radius-sm:   8px;   /* small interactive elements */
  --radius-md:   12px;  /* inputs & buttons */
  --radius-lg:   16px;  /* cards */
  --radius-xl:   24px;  /* large containers & mockups */
  --radius-pill: 999px; /* pills / badges */

  /* ---- Border widths ---- */
  --border-1: 1px;

  /* ---- Shadows — subtle only (spec: avoid heavy shadows) ---- */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.30),
               0 1px 3px rgba(0,0,0,0.20);
  --shadow-md: 0 4px 14px rgba(0,0,0,0.30),
               0 1px 4px rgba(0,0,0,0.24);
  --shadow-lg: 0 12px 34px rgba(0,0,0,0.40),
               0 4px 12px rgba(0,0,0,0.28);
  --shadow-xl: 0 24px 60px rgba(0,0,0,0.48),
               0 8px 20px rgba(0,0,0,0.32);

  /* Soft gold focus halo (used sparingly on key CTAs) */
  --shadow-gold: 0 0 0 1px rgba(212,175,55,0.40),
                 0 8px 24px rgba(212,175,55,0.14);
}
/* ============================================================
   Tectus — Motion tokens
   Exact and trustworthy. Smooth, firm easing. No bounce, no elastic,
   no dramatic delays, no constant pulsing.
   ============================================================ */
:root {
  --dur-fast:   150ms;  /* @kind other */
  --dur-base:   220ms;  /* @kind other */
  --dur-slow:   300ms;  /* @kind other */

  /* Firm, confident easing — settles without overshoot */
  --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-out:      cubic-bezier(0.16, 1, 0.30, 1); /* @kind other */
  --ease-in-out:   cubic-bezier(0.65, 0.05, 0.36, 1); /* @kind other */
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms; /* @kind other */
    --dur-base: 0ms; /* @kind other */
    --dur-slow: 0ms; /* @kind other */
  }
}
/* ============================================================
   Tectus — Base element defaults
   Dark-first canvas. Applies the foundation so any consumer page
   that links styles.css inherits the brand surface + type.
   ============================================================ */
* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'ss01' 0;
}

/* ---- Heading scale (element-level, so Webflow h1–h6 inherit) ---- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--color-text);
  margin: 0;
  font-weight: var(--fw-bold);
}
h1 { font-size: var(--fs-h1); font-weight: var(--fw-bold); letter-spacing: -0.03em; line-height: 1.1; }
h2 { font-size: var(--fs-h2); font-weight: var(--fw-bold); letter-spacing: -0.02em; line-height: 1.15; }
h3 { font-size: var(--fs-h3); font-weight: var(--fw-semibold); letter-spacing: -0.01em; line-height: 1.2; }
h4 { font-size: var(--fs-h4); font-weight: var(--fw-semibold); letter-spacing: -0.005em; line-height: 1.3; }
h5 { font-size: var(--fs-h5); font-weight: var(--fw-semibold); letter-spacing: 0; line-height: 1.35; }
h6 { font-size: var(--fs-h6); font-weight: var(--fw-semibold); letter-spacing: 0; line-height: 1.4; }

/* Utility classes mirror the element scale (use when you can't change the tag) */
.h1 { font-family: var(--font-display); font-size: var(--fs-h1); font-weight: var(--fw-bold); letter-spacing: -0.03em; line-height: 1.1; color: var(--color-text); }
.h2 { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: var(--fw-bold); letter-spacing: -0.02em; line-height: 1.15; color: var(--color-text); }
.h3 { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: var(--fw-semibold); letter-spacing: -0.01em; line-height: 1.2; color: var(--color-text); }
.h4 { font-family: var(--font-display); font-size: var(--fs-h4); font-weight: var(--fw-semibold); letter-spacing: -0.005em; line-height: 1.3; color: var(--color-text); }
.h5 { font-family: var(--font-display); font-size: var(--fs-h5); font-weight: var(--fw-semibold); line-height: 1.35; color: var(--color-text); }
.h6 { font-family: var(--font-display); font-size: var(--fs-h6); font-weight: var(--fw-semibold); line-height: 1.4; color: var(--color-text); }
.display { font-family: var(--font-display); font-size: var(--fs-display); font-weight: var(--fw-bold); letter-spacing: -0.035em; line-height: 1.05; color: var(--color-text); }

a { color: var(--color-primary); text-decoration: none; }
a:hover { color: var(--color-primary-hover); }

::selection { background: var(--gold-wash); color: var(--color-text); }

/* Quiet, premium scrollbar for product surfaces */
* { scrollbar-width: thin; scrollbar-color: var(--ink-500) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
  background: var(--ink-500);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--ink-600); }
/* ============================================================
   Tectus Design System — global entry point
   Consumers link THIS file. Import order only — no rules here.
   Dark-first · premium operational trust.
   ============================================================ */
@import url('tokens/fonts.css');
@import url('tokens/colors.css');
@import url('tokens/typography.css');
@import url('tokens/spacing.css');
@import url('tokens/elevation.css');
@import url('tokens/motion.css');
@import url('tokens/base.css');