/* ==========================================================================
   BORGE ENGINEERING (India) — Global Design Tokens
   Derived from the Borge brand mark: maroon pill + gold lightning bolt.
   Signature motif: single-line-diagram "busbar rail" connecting the
   six engineering pillars — see components/pillars.css
   ========================================================================== */

:root {

  /* ---- Brand color: primary ---- */
  --color-maroon:        #8C1F3B;   /* Borge Engineering pill */
  --color-maroon-deep:   #5C1327;   /* pressed states, dark section washes */
  --color-maroon-tint:   #F5E6EA;   /* faint maroon wash for hover/active bg */

  /* ---- Brand color: accent ---- */
  --color-gold:          #F2A900;   /* lightning bolt — use sparingly, as spark */
  --color-gold-dim:      #C98900;   /* hover state for gold accents */

  /* ---- Neutrals ---- */
  --color-graphite:      #1A1D21;   /* near-black — dark sections, primary text */
  --color-graphite-soft: #2A2E33;   /* dark section secondary surfaces */
  --color-steel:         #54606B;   /* secondary/muted text on light bg */
  --color-steel-light:   #889299;   /* tertiary text, placeholders */
  --color-porcelain:     #F6F4F0;   /* warm light background */
  --color-porcelain-dim: #EAE7E1;   /* card/section borders on light bg */
  --color-white:         #FFFFFF;

  /* ---- Semantic aliases (use these in components, not raw colors) ---- */
  --color-bg:            var(--color-porcelain);
  --color-bg-dark:       var(--color-graphite);
  --color-surface:       var(--color-white);
  --color-text:          var(--color-graphite);
  --color-text-muted:    var(--color-steel);
  --color-text-inverse:  var(--color-porcelain);
  --color-border:        var(--color-porcelain-dim);
  --color-accent:        var(--color-gold);
  --color-primary:       var(--color-maroon);

  /* ---- Typography ---- */
  --font-display: 'Space Grotesk', 'Arial Narrow', sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'IBM Plex Mono', 'Courier New', monospace;

  /* Type scale — fluid, clamps between mobile and desktop */
  --text-xs:    0.75rem;                                   /* 12px — ferrule tags, captions */
  --text-sm:    0.875rem;                                  /* 14px — small print */
  --text-base:  1rem;                                      /* 16px — body */
  --text-md:    clamp(1.125rem, 1rem + 0.5vw, 1.25rem);    /* lead paragraphs */
  --text-lg:    clamp(1.5rem, 1.2rem + 1.2vw, 2rem);       /* section subheads */
  --text-xl:    clamp(2rem, 1.5rem + 2vw, 3rem);           /* section H2 */
  --text-2xl:   clamp(2.5rem, 1.8rem + 3vw, 4.5rem);       /* hero H1 */

  --leading-tight: 1.1;
  --leading-snug:  1.35;
  --leading-normal: 1.6;

  --tracking-tight: -0.02em;
  --tracking-wide:  0.08em;   /* eyebrows, mono labels */
  --tracking-wider: 0.16em;   /* nav, ferrule tags */

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

  /* ---- Layout ---- */
  --container-max: 1240px;
  --container-pad: clamp(1.25rem, 4vw, 3rem);
  --header-height: 84px;

  /* ---- Radius ---- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* ---- Elevation ---- */
  --shadow-sm: 0 1px 2px rgba(26, 29, 33, 0.06);
  --shadow-md: 0 8px 24px rgba(26, 29, 33, 0.08);
  --shadow-lg: 0 24px 48px rgba(26, 29, 33, 0.14);

  /* ---- Motion ---- */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 200ms;
  --duration-base: 400ms;
  --duration-slow: 800ms;

  /* Scroll fade-in tokens (used by the pillar rail + any reveal-on-scroll el) */
  --reveal-distance: 28px;
  --reveal-duration: 700ms;

  /* ---- Z-index scale ---- */
  --z-header: 100;
  --z-modal: 200;
  --z-toast: 300;
}

/* Respect reduced-motion preference globally */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
    --reveal-duration: 0ms;
  }
}