/* ==========================================================================
   DAT INFORMATICS PRIVATE LIMITED — DESIGN TOKENS
   Single source of truth. Every color, size, and timing value used anywhere
   on the site should trace back to a variable defined here.
   ========================================================================== */

:root {

    /* ---------- COLOR — grounded in DAT's actual logo + product LEDs ----------
     Brand Blue = the exact blue used in the D@T logo
     Ink Navy = a deepened version of that blue, for dark sections/header
     LED Green = the literal glow color of DAT's train display boards
     Steel / Platform Grey = neutral structural tones
     Alert Red = urgency only (tender deadlines, errors)
  */
  --color-brand-blue: #1C4E9E;  /* matches the D@T logo */
  --color-ink-900: #0A1F3D;     /* deepened brand blue — headers, dark bg */
  --color-ink-800: #123162;
  --color-ink-700: #1B3F7D;
  --color-steel-600: #4C5A6E;
  --color-steel-400: #7C8BA0;
  --color-steel-200: #C4CCD8;
  --color-platform-100: #E8EAEE;
  --color-platform-50: #F5F6F8;
  --color-white: #FFFFFF;

  --color-led-green-500: #34D073;  /* primary accent — matches your board glow */
  --color-led-green-600: #1FAE59;  /* hover/active */
  --color-led-green-100: #E3FBEE;  /* tint bg for callouts */
  --color-accent-text: #0E7A45;    /* darkened green — meets 4.5:1 on white/light bg, use for text only */

  --color-alert-600: #D63A2F;
  --color-success-600: #1FAE59;
  --color-amber-500: #F2A93B;

  /* Semantic aliases — reference these in components, not raw colors above */
  --color-bg: var(--color-white);
  --color-bg-alt: var(--color-platform-50);
  --color-bg-inverse: var(--color-ink-900);
  --color-text: var(--color-ink-900);
  --color-text-muted: var(--color-steel-600);
  --color-text-inverse: var(--color-white);
  --color-text-inverse-muted: var(--color-steel-200);
  --color-brand: var(--color-brand-blue);
  --color-accent: var(--color-led-green-500);
  --color-accent-hover: var(--color-led-green-600);
  --color-border: var(--color-steel-200);
  --color-border-inverse: rgba(255, 255, 255, 0.14);
   /* ---------- TYPE ----------
   Display: Inter — clean, modern, geometric grotesque used for headings
   Body: Inter — same family for body text, high legibility across sizes
   Mono: IBM Plex Mono — data readouts: coordinates, tender IDs, clock digits
   */
   --font-display: 'Inter', -apple-system, 'Segoe UI', sans-serif;
   --font-body: 'Inter', -apple-system, 'Segoe UI', sans-serif;
   --font-mono: 'IBM Plex Mono', 'Courier New', monospace;

  /* Fluid type scale — clamp(min, preferred, max) */
  --text-xs:   clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
  --text-sm:   clamp(0.875rem, 0.84rem + 0.15vw, 0.9375rem);
  --text-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --text-lg:   clamp(1.125rem, 1.06rem + 0.3vw, 1.25rem);
  --text-xl:   clamp(1.375rem, 1.25rem + 0.6vw, 1.75rem);
  --text-2xl:  clamp(1.75rem, 1.5rem + 1.2vw, 2.5rem);
  --text-3xl:  clamp(2.25rem, 1.8rem + 2vw, 3.5rem);
  --text-4xl:  clamp(2.75rem, 2rem + 3.2vw, 5rem);

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

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.08em;   /* used for eyebrows / labels */
  --tracking-wider: 0.16em;  /* used for the mono data readouts */

  /* ---------- SPACING SCALE (4px base) ---------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

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

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

  /* ---------- SHADOW ---------- */
  --shadow-sm: 0 1px 2px rgba(11, 31, 58, 0.06), 0 1px 1px rgba(11, 31, 58, 0.04);
  --shadow-md: 0 4px 12px rgba(11, 31, 58, 0.08), 0 2px 4px rgba(11, 31, 58, 0.06);
  --shadow-lg: 0 12px 32px rgba(11, 31, 58, 0.14), 0 4px 8px rgba(11, 31, 58, 0.06);
  --shadow-amber-glow: 0 0 0 3px rgba(242, 169, 59, 0.25);

  /* ---------- MOTION ----------
     Two speeds only. Easing leans mechanical/precise (not bouncy) —
     matches split-flap/relay-driven signage rather than a consumer app.
  */
  --ease-precise: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-flip: cubic-bezier(0.62, 0, 0.38, 1);
  --duration-quick: 180ms;
  --duration-base: 320ms;
  --duration-slow: 600ms;

  /* ---------- Z-INDEX SCALE ---------- */
  --z-header: 100;
  --z-dropdown: 200;
  --z-modal: 300;
  --z-toast: 400;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-quick: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
  }
}