/* ==========================================================================
   DeilTech — Design tokens
   Single source of truth for brand colors, spacing, typography, radius,
   shadow, transition, and container-width primitives. Loaded globally in
   _Layout.cshtml (head) so every current and future page has access to the
   same design system, regardless of which page-specific stylesheets it
   also loads.

   The original --dt-* variables (defined here, previously duplicated in
   home-hero.css) remain the canonical brand values so no existing colour
   is changed. --brand-*, --spacing-*, --radius-*, --shadow-*,
   --transition-*, and --container-* are added as the forward-looking design
   token layer for new and future components; they currently alias the same
   values already used throughout the site.
   ========================================================================== */

:root {
  /* ---------- Brand colors (canonical — do not change values here) ---------- */
  --dt-charcoal: #1a1c1f;
  --dt-charcoal-soft: rgba(26, 28, 31, 0.72);
  --dt-white: #f7f7f5;
  --dt-muted: #c7ccd1;
  --dt-gold: #c98a3e;
  --dt-gold-hover: #d99c52;
  --dt-gold-line: rgba(201, 138, 62, 0.28);
  --dt-font: "Segoe UI", ui-sans-serif, system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;

  /* Secondary neutrals already in use across page CSS, centralized for reuse */
  --dt-ink-soft: #14161a;
  --dt-body-copy: #4a5158;
  --dt-body-copy-muted: #6b7279;

  /* ---------- Brand token aliases (semantic layer for future growth) ---------- */
  --brand-primary: var(--dt-gold);
  --brand-primary-hover: var(--dt-gold-hover);
  --brand-secondary: var(--dt-charcoal);
  --brand-accent: var(--dt-gold-line);
  --brand-dark: var(--dt-charcoal);
  --brand-light: var(--dt-white);
  --brand-font: var(--dt-font);

  /* ---------- Spacing scale ---------- */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2.5rem;
  --spacing-xl: 4rem;

  /* ---------- Typography scale ---------- */
  --text-heading-xl: clamp(2.4rem, 4.2vw, 3.4rem);
  --text-heading-lg: clamp(2rem, 3.2vw, 2.75rem);
  --text-heading-md: clamp(1.5rem, 2.4vw, 1.9rem);
  --text-heading-sm: 1.2rem;
  --text-body-lg: clamp(1.05rem, 1.3vw, 1.2rem);
  --text-body-md: 1rem;
  --text-body-sm: 0.92rem;
  --text-eyebrow: 0.82rem;

  --line-height-heading: 1.15;
  --line-height-body: 1.7;
  --line-height-tight: 1.35;

  /* ---------- Radius ---------- */
  --radius-sm: 0.4rem;
  --radius-md: 0.6rem;
  --radius-lg: 0.75rem;
  --radius-pill: 999px;

  /* ---------- Shadow ---------- */
  --shadow-sm: 0 12px 28px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 16px 34px rgba(26, 28, 31, 0.14);
  --shadow-lg: 0 30px 70px rgba(0, 0, 0, 0.4);

  /* ---------- Transitions ---------- */
  --transition-fast: 0.2s ease;
  --transition-base: 0.25s ease;
  --transition-slow: 0.4s ease;

  /* ---------- Layout ---------- */
  --container-width: 1200px;
  --container-padding-inline: clamp(1.25rem, 4vw, 3.5rem);
  --section-padding-block: clamp(4rem, 8vw, 6.5rem);
}