/* ============================================================
   BHAGWATI TOOLS — DESIGN SYSTEM
   Industrial Luxury Theme
   Version: 1.0.0
   
   TOKEN HIERARCHY:
   1. Color Tokens
   2. Typography Tokens
   3. Spacing Tokens
   4. Border & Radius Tokens
   5. Shadow & Elevation Tokens
   6. Motion Tokens
   7. Z-Index Tokens
   ============================================================ */

/* ============================================================
   GOOGLE FONTS IMPORT — Barlow + IBM Plex Mono
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400&family=IBM+Plex+Mono:wght@400;500;600;700&display=swap');

/* ============================================================
   1. COLOR TOKENS
   ============================================================ */
:root {

  /* --- Dark Surfaces --- */
  --ds-color-obsidian:        #0A0A0A;  /* Page background — deepest surface      */
  --ds-color-carbon:          #1C1C1E;  /* Primary container surface               */
  --ds-color-carbon-light:    #2C2C2E;  /* Elevated container / hover surface      */
  --ds-color-carbon-border:   rgba(255,255,255,0.08); /* Subtle border on dark bg   */

  /* --- Signal Red --- */
  --ds-color-red:             #D32F2F;  /* Primary accent — Signal Red             */
  --ds-color-red-glow:        #EF5350;  /* Hover state                             */
  --ds-color-red-deep:        #B71C1C;  /* Pressed / active state                  */
  --ds-color-red-alpha-10:    rgba(211,47,47,0.10); /* Subtle red tint on surface  */
  --ds-color-red-alpha-20:    rgba(211,47,47,0.20);
  --ds-color-red-alpha-40:    rgba(211,47,47,0.40);

  /* --- Steel Spectrum --- */
  --ds-color-steel:           #8A8A8A;  /* Body text on dark bg / borders          */
  --ds-color-steel-light:     #B8B8B8;  /* Primary body text on dark bg            */
  --ds-color-steel-bright:    #E8E8E8;  /* Headings / high-contrast text           */
  --ds-color-white:           #FFFFFF;  /* Pure white — reserved use               */

  /* --- Functional Colors --- */
  --ds-color-whatsapp:        #25D366;
  --ds-color-whatsapp-dark:   #128C7E;
  --ds-color-success:         #388E3C;
  --ds-color-warning:         #F57C00;
  --ds-color-info:            #1565C0;
  --ds-color-error:           var(--ds-color-red);

  /* --- Light Surface (spec tables, forms) --- */
  --ds-color-surface-white:   #FFFFFF;
  --ds-color-surface-light:   #F5F5F5;
  --ds-color-surface-row-odd: #FAFAFA;
  --ds-color-surface-row-even:#F0F0F0;
  --ds-color-text-dark:       #111111;
  --ds-color-text-body:       #333333;
  --ds-color-text-muted:      #666666;
  --ds-color-border-light:    #E0E0E0;
}

/* ============================================================
   2. TYPOGRAPHY TOKENS
   ============================================================ */
:root {

  /* --- Typefaces --- */
  --ds-font-primary:   'Barlow', 'DIN Alternate', system-ui, -apple-system, sans-serif;
  --ds-font-data:      'IBM Plex Mono', 'Courier New', monospace;

  /* --- Type Scale --- */
  --ds-text-display:  4.5rem;    /* 72px — hero headlines             */
  --ds-text-h1:       3rem;      /* 48px — page titles                */
  --ds-text-h2:       2.25rem;   /* 36px — section titles             */
  --ds-text-h3:       1.75rem;   /* 28px — sub-section titles         */
  --ds-text-h4:       1.375rem;  /* 22px — card titles                */
  --ds-text-h5:       1.125rem;  /* 18px — sidebar section titles     */
  --ds-text-h6:       0.8125rem; /* 13px — eyebrow labels (ALL CAPS)  */
  --ds-text-body-lg:  1.125rem;  /* 18px — feature text               */
  --ds-text-body:     1rem;      /* 16px — standard prose             */
  --ds-text-body-sm:  0.875rem;  /* 14px — secondary info             */
  --ds-text-caption:  0.75rem;   /* 12px — labels / footnotes         */
  --ds-text-model:    0.875rem;  /* 14px — model numbers (Mono)       */
  --ds-text-spec:     0.8125rem; /* 13px — spec values (Mono)         */

  /* --- Font Weights --- */
  --ds-weight-regular:  400;
  --ds-weight-medium:   500;
  --ds-weight-semibold: 600;
  --ds-weight-bold:     700;
  --ds-weight-extrabold:800;
  --ds-weight-black:    900;

  /* --- Line Heights --- */
  --ds-leading-tight:   1.05;
  --ds-leading-snug:    1.2;
  --ds-leading-normal:  1.5;
  --ds-leading-relaxed: 1.6;
  --ds-leading-loose:   1.7;

  /* --- Letter Spacing --- */
  --ds-tracking-tight:   -2px;
  --ds-tracking-snug:    -1px;
  --ds-tracking-normal:   0px;
  --ds-tracking-wide:     0.3px;
  --ds-tracking-wider:    0.5px;
  --ds-tracking-widest:   2px;    /* eyebrow labels */
}

/* ============================================================
   3. SPACING TOKENS — Base unit: 4px
   ============================================================ */
:root {
  --ds-space-1:   0.25rem;   /*  4px */
  --ds-space-2:   0.5rem;    /*  8px */
  --ds-space-3:   0.75rem;   /* 12px */
  --ds-space-4:   1rem;      /* 16px */
  --ds-space-5:   1.25rem;   /* 20px */
  --ds-space-6:   1.5rem;    /* 24px */
  --ds-space-7:   1.75rem;   /* 28px */
  --ds-space-8:   2rem;      /* 32px */
  --ds-space-10:  2.5rem;    /* 40px */
  --ds-space-12:  3rem;      /* 48px */
  --ds-space-14:  3.5rem;    /* 56px */
  --ds-space-16:  4rem;      /* 64px */
  --ds-space-20:  5rem;      /* 80px */
  --ds-space-24:  6rem;      /* 96px */
  --ds-space-32:  8rem;      /* 128px */

  /* --- Semantic Spacing --- */
  --ds-section-mobile:   var(--ds-space-16);  /* 64px  section vertical padding */
  --ds-section-desktop:  var(--ds-space-24);  /* 96px  section vertical padding */
  --ds-card-padding:     var(--ds-space-6);   /* 24px  */
  --ds-cell-x:           var(--ds-space-4);   /* 16px  table cell horizontal    */
  --ds-cell-y:           0.875rem;            /* 14px  table cell vertical       */
  --ds-nav-height:       4.5rem;              /* 72px  desktop nav               */
  --ds-nav-height-mobile:3.75rem;             /* 60px  mobile nav                */
  --ds-sidebar-width:    16rem;               /* 256px sidebar                   */
  --ds-container-max:    87.5rem;             /* 1400px max content width        */
}

/* ============================================================
   4. BORDER & RADIUS TOKENS
   ============================================================ */
:root {
  --ds-radius-none:   0;
  --ds-radius-sm:     0.25rem;  /* 4px  — buttons, inputs, table headers */
  --ds-radius-md:     0.5rem;   /* 8px  — cards                          */
  --ds-radius-lg:     0.75rem;  /* 12px — panels, modals                 */
  --ds-radius-xl:     1rem;     /* 16px — large cards                    */
  --ds-radius-full:   9999px;   /* pill — tags, badges                   */

  --ds-border-thin:   1px;
  --ds-border-base:   1.5px;
  --ds-border-thick:  2px;
  --ds-border-accent: 3px;      /* red accent bar width (default)        */
  --ds-border-accent-hover: 8px;/* red accent bar width on hover         */
  --ds-border-table-header: 3px;/* red bottom border on spec table header*/
}

/* ============================================================
   5. SHADOW & ELEVATION TOKENS
   ============================================================ */
:root {
  /* Elevation 0 — Ground / page background */
  --ds-shadow-0:  none;

  /* Elevation 1 — Raised containers (cards, nav bar, sidebar) */
  --ds-shadow-1:  0 1px 4px rgba(0,0,0,0.40);

  /* Elevation 2 — Floating (hovered cards, dropdowns) */
  --ds-shadow-2:  0 4px 16px rgba(0,0,0,0.50);

  /* Elevation 3 — Overlay (mega menu, tooltips) */
  --ds-shadow-3:  0 12px 40px rgba(0,0,0,0.60);

  /* Elevation 4 — Modal (search overlay, mobile menu) */
  --ds-shadow-4:  0 24px 80px rgba(0,0,0,0.80);

  /* Red glow shadow — used on primary buttons and active cards */
  --ds-shadow-red:    0 4px 12px rgba(211,47,47,0.40);
  --ds-shadow-red-lg: 0 8px 24px rgba(211,47,47,0.50);

  /* Nav scrolled shadow */
  --ds-shadow-nav:    0 4px 24px rgba(0,0,0,0.40);

  /* Light surface shadow (spec table, cards on white bg) */
  --ds-shadow-light:  0 4px 24px rgba(0,0,0,0.12);
}

/* ============================================================
   6. MOTION TOKENS
   ============================================================ */
:root {
  /* --- Durations --- */
  --ds-duration-instant:   80ms;
  --ds-duration-fast:      150ms;
  --ds-duration-base:      200ms;
  --ds-duration-slow:      300ms;
  --ds-duration-enter:     350ms;
  --ds-duration-page:      600ms;

  /* --- Easing Curves --- */
  --ds-ease-standard:   cubic-bezier(0.4, 0, 0.2, 1);  /* standard  */
  --ds-ease-decelerate: cubic-bezier(0, 0, 0.2, 1);    /* things entering */
  --ds-ease-accelerate: cubic-bezier(0.4, 0, 1, 1);    /* things exiting  */
  --ds-ease-spring:     cubic-bezier(0.175, 0.885, 0.32, 1.275); /* hover */
  --ds-ease-linear:     linear;

  /* --- Composed Transitions --- */
  --ds-transition-base:   var(--ds-duration-base) var(--ds-ease-standard);
  --ds-transition-fast:   var(--ds-duration-fast) var(--ds-ease-standard);
  --ds-transition-slow:   var(--ds-duration-slow) var(--ds-ease-standard);
  --ds-transition-enter:  var(--ds-duration-enter) var(--ds-ease-decelerate);
  --ds-transition-exit:   var(--ds-duration-slow) var(--ds-ease-accelerate);
}

/* ============================================================
   7. Z-INDEX TOKENS
   ============================================================ */
:root {
  --ds-z-base:        0;
  --ds-z-raised:      10;
  --ds-z-dropdown:    100;
  --ds-z-sticky:      200;
  --ds-z-fixed:       300;
  --ds-z-overlay:     400;   /* mega menu, tooltips */
  --ds-z-modal:       500;   /* mobile menu, search overlay */
  --ds-z-toast:       600;   /* notifications */
  --ds-z-nav:          700;   /* navbar bar */
  --ds-z-panel:        750;   /* floating panels, dropdowns */
  --ds-z-top:          800;   /* highest overlay level */
}

/* ============================================================
   KEYFRAME ANIMATIONS
   ============================================================ */

/* Scroll reveal — default state before animation triggers */
@keyframes ds-reveal-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* Skeleton shimmer */
@keyframes ds-shimmer {
  from { background-position: -200% 0; }
  to   { background-position:  200% 0; }
}

/* Staggered row reveal */
@keyframes ds-row-in {
  from { opacity: 0; transform: translateX(-4px); }
  to   { opacity: 1; transform: translateX(0);    }
}

/* Ripple on click */
@keyframes ds-ripple {
  from { transform: scale(0); opacity: 0.2; }
  to   { transform: scale(3); opacity: 0;   }
}

/* Slide down (mega menu open) */
@keyframes ds-slide-down {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* Slide up (mobile panel open) */
@keyframes ds-slide-up {
  from { opacity: 0.6; transform: translateY(100%); }
  to   { opacity: 1;   transform: translateY(0);    }
}

/* Crumb build (left to right) */
@keyframes ds-crumb-in {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0);    }
}

/* Red accent bar expand */
@keyframes ds-bar-expand {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* ============================================================
   UTILITY CLASSES — Design System Helpers
   ============================================================ */

/* Scroll-reveal wrapper — add to sections */
.ds-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity   var(--ds-duration-page) var(--ds-ease-decelerate),
    transform var(--ds-duration-page) var(--ds-ease-decelerate);
}

.ds-reveal.ds-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Skeleton placeholder */
.ds-skeleton {
  background: linear-gradient(
    90deg,
    var(--ds-color-carbon) 25%,
    var(--ds-color-carbon-light) 50%,
    var(--ds-color-carbon) 75%
  );
  background-size: 200% 100%;
  animation: ds-shimmer 1.5s var(--ds-ease-linear) infinite;
  border-radius: var(--ds-radius-sm);
}

/* Screen-reader only utility */
.ds-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* Focus ring — universal accessibility */
.ds-focus-ring:focus-visible,
.ds-focus-ring:focus {
  outline: 2px solid var(--ds-color-red);
  outline-offset: 2px;
}

/* Section container */
.ds-section {
  padding: var(--ds-section-mobile) 0;
}

@media (min-width: 1024px) {
  .ds-section {
    padding: var(--ds-section-desktop) 0;
  }
}

/* Container */
.ds-container {
  max-width: var(--ds-container-max);
  margin: 0 auto;
  padding-left:  var(--ds-space-4);
  padding-right: var(--ds-space-4);
}

@media (min-width: 640px) {
  .ds-container {
    padding-left:  var(--ds-space-6);
    padding-right: var(--ds-space-6);
  }
}

@media (min-width: 1024px) {
  .ds-container {
    padding-left:  var(--ds-space-8);
    padding-right: var(--ds-space-8);
  }
}

/* Eyebrow label */
.ds-eyebrow {
  font-family:   var(--ds-font-primary);
  font-size:     var(--ds-text-h6);
  font-weight:   var(--ds-weight-bold);
  letter-spacing:var(--ds-tracking-widest);
  text-transform: uppercase;
  color:         var(--ds-color-red);
  margin-bottom: var(--ds-space-2);
  display:       block;
}

/* Section header rule — 24px red line below eyebrow */
.ds-section-rule {
  display:       block;
  width:         24px;
  height:        2px;
  background:    var(--ds-color-red);
  margin:        var(--ds-space-2) 0 var(--ds-space-4);
}

/* ============================================================
   REDUCED MOTION — Respect user preference
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration:        0.01ms !important;
    animation-iteration-count: 1      !important;
    transition-duration:       0.01ms !important;
  }

  .ds-reveal {
    opacity:   1;
    transform: none;
  }
}