/* 3D Laboratories design tokens.
   One place for color, type, spacing and radius. Every stylesheet on the
   site reads from these variables; nothing else hard-codes a color.
   The light set is the page default (white header, light content bands);
   the dark set is scoped to the dark bands: hero, page heads, product bands
   with app captures, the footer, and anything carrying .t-dark. */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/Inter-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/Inter-Medium.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/Inter-SemiBold.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/Inter-Bold.woff2') format('woff2');
}

:root, .t-light {
  /* Surfaces: page, panel, raised panel, control */
  --c-bg-0: #F2F3F5;
  --c-bg-1: #FAFAFB;
  --c-bg-2: #EEF0F3;
  --c-bg-3: #E3E6EA;
  --c-line: #E1E4E9;
  --c-line-strong: #CBD1D9;

  /* Text */
  --c-text: #1B2230;
  --c-text-2: #3A4454;
  --c-muted: #626D7D;
  --c-faint: #98A2B0;

  /* Brand */
  --c-navy: #304068;
  --c-navy-hover: #24325A;
  --c-accent: #2757C4;
  --c-accent-hover: #1E47A6;
  --c-accent-ink: #FFFFFF;
  --c-accent-soft: rgba(39, 87, 196, 0.10);
  --c-accent-line: rgba(39, 87, 196, 0.35);
  --c-heat: #D9700F;
  --c-heat-soft: rgba(217, 112, 15, 0.12);

  /* State */
  --c-success: #15803D;
  --c-warning: #B45309;
  --c-danger: #DC2626;

  /* Engine feature domains (match the application's features reference) */
  --c-walls: #3B82F6;
  --c-walls-soft: #2757C4;
  --c-walls-tint: #E4ECFB;
  --c-surfaces: #14B8A6;
  --c-surfaces-soft: #0F766E;
  --c-surfaces-tint: #DDF3F0;
  --c-thermal: #F59E0B;
  --c-thermal-soft: #B45309;
  --c-thermal-tint: #FBECD4;

  /* Veils laid over faded background imagery so copy keeps its contrast */
  --veil-a: rgba(242, 243, 245, 0.85);
  --veil-b: rgba(242, 243, 245, 0.35);
  --veil-c: rgba(242, 243, 245, 0);

  /* Type */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, 'Cascadia Mono', 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-md: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.375rem;
  --fs-2xl: 1.75rem;
  --fs-3xl: 2.25rem;
  --fs-4xl: 3rem;
  --fs-5xl: 3.75rem;
  --lh-tight: 1.15;
  --lh-head: 1.3;
  --lh-body: 1.6;
  --track-caps: 0.12em;

  /* Spacing scale (4px base) */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;

  /* Shape and elevation. --cut is the chamfer used by the technical detailing. */
  --r-s: 4px;
  --r-m: 8px;
  --r-l: 12px;
  --cut: 12px;
  --cut-s: 8px;
  --shadow-1: 0 1px 2px rgba(16, 24, 40, 0.06);
  --shadow-2: 0 16px 40px -12px rgba(16, 24, 40, 0.18);
  --ring: 0 0 0 3px var(--c-accent-soft);

  --container: 1200px;
  --nav-h: 68px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  color-scheme: light;
}

.t-dark, .sf, .m-hero, .m-pagehead, .page-title-overlap {
  --c-bg-0: #0B1017;
  --c-bg-1: #10151E;
  --c-bg-2: #161C27;
  --c-bg-3: #1E2634;
  --c-line: #1F2836;
  --c-line-strong: #2C3646;
  --c-text: #F2F4F7;
  --c-text-2: #C4CAD3;
  --c-muted: #8B929C;
  --c-faint: #5C6470;
  --c-accent: #4A9BFF;
  --c-accent-hover: #6DB0FF;
  --c-accent-ink: #06101A;
  --c-accent-soft: rgba(74, 155, 255, 0.14);
  --c-accent-line: rgba(74, 155, 255, 0.35);
  --c-heat: #FF8A1E;
  --c-heat-soft: rgba(255, 138, 30, 0.14);
  --c-success: #3DD68C;
  --c-warning: #FFB454;
  --c-danger: #F0524F;
  --c-walls-soft: #8DBBFF;
  --c-walls-tint: #1B2940;
  --c-surfaces-soft: #5EEAD4;
  --c-surfaces-tint: #15302E;
  --c-thermal-soft: #FCD34D;
  --c-thermal-tint: #3A2E14;
  --veil-a: rgba(11, 16, 23, 0.82);
  --veil-b: rgba(11, 16, 23, 0.45);
  --veil-c: rgba(11, 16, 23, 0.15);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 12px 32px rgba(0, 0, 0, 0.45);
  background: var(--c-bg-0);
  color: var(--c-text-2);
  color-scheme: dark;
}