/* ═══════════════════════════════════════════════════════════════
   RailParcels — Design System V3 tokens for the marketing website
   Source of truth: ../design_systemV3.md (tailwind.config.js tokens)
   Font:  Inter Variable (self-hosted, assets/vendor/inter)
   Icons: Flaticon UIcons — fi-rr-* (default), fi-br-* (emphasis),
          fi-brands-* (trademark glyphs only). Self-hosted.
   Load order on every page:
     vendor/inter/inter.css → vendor/uicons/... → this file → page <style>
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* §1.1 brand / semantic tokens (light = DEFAULT)
     Brand pair taken from the logo: orange "RAIL" + navy logo mark. */
  --rp-primary:       #FC4F0B;   /* logo orange */
  --rp-primary-hover: #E04306;
  --rp-primary-rgb:   252,79,11;
  --rp-secondary:     #023855;   /* logo navy */
  --rp-secondary-rgb: 2,56,85;
  --rp-secondary-soft:#386882;   /* logo mark mid-tone */
  --rp-accent:        #14B8A6;
  --rp-surface-bg:    #F8FAFC;
  --rp-surface-card:  #FFFFFF;
  --rp-ink:           #0F172A;
  --rp-ink-muted:     #64748B;
  --rp-border:        #E2E8F0;
  --rp-success:       #22C55E;
  --rp-warning:       #F59E0B;
  --rp-danger:        #EF4444;
  --rp-purple:        #8B5CF6;
  --rp-indigo:        #6366F1;

  /* §1.2 status-tint pairs */
  --rp-success-tint: #DCFCE7;  --rp-success-tint-text: #166534;
  --rp-neutral-tint: #F1F5F9;  --rp-neutral-tint-text: #475569;
  --rp-danger-tint:  #FEF2F2;  --rp-danger-tint-text:  #DC2626;
  --rp-purple-tint:  #EDE9FE;  --rp-purple-tint-text:  #6D28D9;
  --rp-warning-tint: #FEF3C7;  --rp-warning-tint-text: #B45309;
  --rp-primary-tint: #FFF1EA;  --rp-primary-tint-text: #C2410C;

  /* §2 typography */
  --font-sans: "Inter Variable", system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --text-2xs: 10px;
  --text-display-sm: 28px;
  --text-display-md: 30px;
  --text-display-lg: 48px;

  /* §4 radius & shadow */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 18px;
  --r-2xl: 22px;
  --r-full: 9999px;
  --rp-shadow-card:        0 1px 8px rgba(0,0,0,0.04);
  --rp-shadow-card-hover:  0 12px 32px rgba(0,0,0,0.1);
  --rp-shadow-nav:         0 1px 16px rgba(0,0,0,0.06);
  --rp-shadow-modal:       0 24px 64px rgba(0,0,0,0.18);
  --rp-shadow-button-glow: 0 4px 14px rgba(var(--rp-primary-rgb),0.35);

  /* Banner gradients — from 3000_rail_logistics styles.scss
     .hero (customer) and .hero-lh (lease-holder) */
  --rp-gradient-hero:  linear-gradient(135deg, var(--rp-primary) 0%, var(--rp-secondary) 55%, var(--rp-accent) 100%);
  --rp-gradient-brand: linear-gradient(135deg, #011C2D 0%, #023855 55%, #386882 100%);

  /* ── Page-level aliases. Pages were written against these names;
        they now resolve to the V3 tokens above. ── */
  --orange:       var(--rp-primary);
  --orange-dim:   rgba(var(--rp-primary-rgb),.08);
  --orange-mid:   rgba(var(--rp-primary-rgb),.22);
  --teal:         var(--rp-secondary);
  --teal-dim:     rgba(var(--rp-secondary-rgb),.10);
  --navy:         #023855;
  --dark-text:    var(--rp-ink);
  --gray:         var(--rp-ink-muted);

  --bg:           var(--rp-surface-bg);
  --bg-grad:      linear-gradient(160deg, #FFF4EE 0%, #F8FAFC 55%, #FFFFFF 100%);
  --bg-section:   var(--rp-surface-card);
  --bg-alt:       var(--rp-neutral-tint);
  --bg-card:      var(--rp-surface-card);
  --bg-card-hov:  var(--rp-surface-bg);
  --border:       var(--rp-border);
  --border-card:  var(--rp-border);
  --text:         var(--rp-ink);
  --text-sub:     var(--rp-ink-muted);
  --text-muted:   #94A3B8;
  --nav-bg:       rgba(255,255,255,.92);
  --nav-border:   var(--rp-border);
  --glass:        var(--rp-surface-card);
  --glass-border: var(--rp-border);
  --shadow:       var(--rp-shadow-card-hover);
  --shadow-card:  var(--rp-shadow-card-hover);
  --btn-ghost-c:  var(--rp-ink);
  --btn-ghost-b:  #CBD5E1;
  --step-bg:      var(--rp-surface-card);
  --check-bg:     var(--rp-primary-tint);
  --footer-bg:    #0F172A;
  --footer-text:  #94A3B8;
  --input-bg:     var(--rp-surface-card);
  /* page-specific aliases (auth / tracking / soham) */
  --bg-panel:     linear-gradient(160deg, #FFF4EE 0%, #FFE4D6 55%, #E3EEF4 100%);
  --bg-input:     var(--rp-surface-bg);
  --bg-input-hov: var(--rp-neutral-tint);
  --border-focus: var(--rp-primary);
  --glass-b:      var(--rp-border);
  --track-color:  rgba(var(--rp-primary-rgb),.10);
  --divider:      var(--rp-border);
  --slip-header:  #0F172A;
  --slip-section: var(--rp-surface-bg);
  --green:        var(--rp-success);

  color-scheme: light;
}

/* §1.5 dark mode — `.dark` on <html> (V3 mechanism) and the site's
   existing data-theme="dark" attribute both resolve here. */
html.dark,
[data-theme="dark"] {
  --rp-primary:       #FF6A2C;
  --rp-primary-hover: #FF8A55;
  --rp-primary-rgb:   255,106,44;
  --rp-secondary:     #6FA3C2;   /* navy lifted for contrast on dark surfaces */
  --rp-secondary-rgb: 111,163,194;
  --rp-secondary-soft:#8DB8D2;
  --rp-accent:        #2DD4BF;
  --rp-surface-bg:    #0F172A;
  --rp-surface-card:  #111827;
  --rp-ink:           #F8FAFC;
  --rp-ink-muted:     #94A3B8;
  --rp-border:        #334155;
  --rp-purple:        #A78BFA;

  --rp-success-tint: rgba(34,197,94,.15);   --rp-success-tint-text: #86EFAC;
  --rp-neutral-tint: rgba(148,163,184,.12); --rp-neutral-tint-text: #CBD5E1;
  --rp-danger-tint:  rgba(239,68,68,.15);   --rp-danger-tint-text:  #FCA5A5;
  --rp-purple-tint:  rgba(139,92,246,.18);  --rp-purple-tint-text:  #C4B5FD;
  --rp-warning-tint: rgba(245,158,11,.15);  --rp-warning-tint-text: #FCD34D;
  --rp-primary-tint: rgba(255,106,44,.15);  --rp-primary-tint-text: #FDBA9A;

  --rp-shadow-card:       0 1px 8px rgba(0,0,0,0.3);
  --rp-shadow-card-hover: 0 12px 32px rgba(0,0,0,0.45);
  --rp-shadow-nav:        0 1px 16px rgba(0,0,0,0.4);
  --rp-shadow-modal:      0 24px 64px rgba(0,0,0,0.6);

  --orange-dim:   rgba(var(--rp-primary-rgb),.14);
  --orange-mid:   rgba(var(--rp-primary-rgb),.32);
  --teal-dim:     rgba(var(--rp-secondary-rgb),.14);
  --navy:         #1E293B;

  --bg-grad:      linear-gradient(160deg, #0B1220 0%, #0F172A 50%, #022338 100%);
  --bg-alt:       #0B1220;
  --bg-card-hov:  #1E293B;
  --text-muted:   #64748B;
  --nav-bg:       rgba(15,23,42,.88);
  --btn-ghost-b:  #475569;
  --footer-bg:    #0B1220;
  --input-bg:     #0F172A;
  --bg-panel:     linear-gradient(160deg, #0B1220 0%, #022338 55%, #023855 100%);
  --bg-input:     rgba(255,255,255,.04);
  --bg-input-hov: rgba(255,255,255,.08);
  --track-color:  rgba(var(--rp-primary-rgb),.16);
  --slip-header:  #0B1220;
  --slip-section: rgba(255,255,255,.03);

  color-scheme: dark;
}

/* ── Base ── */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  font-family: var(--font-sans);
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
input, select, textarea, button { font-family: inherit; }
:focus-visible { outline: 2px solid var(--rp-primary); outline-offset: 2px; }
::selection { background: rgba(var(--rp-primary-rgb),.18); }

/* ── §3 Icons: <i class="fi fi-rr-train"></i> ── */
.fi {
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 1; font-style: normal; flex-shrink: 0;
}
.fi::before { display: block; line-height: 1; }

/* Icon tile used inside cards (feature, challenge, step, why) */
.rp-icon-tile {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--rp-primary); background: var(--rp-primary-tint);
}

/* Inline arrow inside a button/link: "Book a Demo  →" */
.btn-arrow { font-size: .95em; transition: transform .2s; }
a:hover > .btn-arrow, button:hover > .btn-arrow { transform: translateX(3px); }

/* Theme toggle glyph (sun/moon) */
#theme-toggle .fi { font-size: 16px; }

/* Social buttons in footer */
.social-btn .fi { font-size: 15px; }

/* Media never overflows the viewport */
img, svg, video { max-width: 100%; }

/* ═══════════════════════════════════════════════════════════════
   Component patterns shared with the RailParcels app
   (3000_rail_logistics/frontend/src/styles.scss). Prefixed with
   `body` so they win over the page-local <style> blocks.
   ═══════════════════════════════════════════════════════════════ */
html { -webkit-tap-highlight-color: transparent; }

/* nav.topnav — glass bar, pill links */
body #nav { box-shadow: none; }
body #nav.scrolled { border-color: var(--rp-border); box-shadow: var(--rp-shadow-nav); }
body .nav-links { gap: 2px; }
body .nav-links a {
  display: inline-block; padding: 8px 14px; border-radius: var(--r-md);
  font-size: 13.5px; font-weight: 500; color: var(--rp-ink-muted);
  transition: background .2s, color .2s;
}
body .nav-links a:hover { background: rgba(var(--rp-primary-rgb),.08); color: var(--rp-primary); }
body .nav-links a.active { background: var(--rp-primary); color: #fff; font-weight: 600; }
/* 5-link nav + Sign In / Request Demo: keep it on one line at tablet widths */
body .nav-links a, body .nav-actions a, body .nav-actions button { white-space: nowrap; }
@media (min-width: 769px) and (max-width: 1100px) { body .nav-links a { padding: 8px 8px; } }

/* Mobile nav — keep logo + actions + burger inside 320–430px widths */
@media (max-width: 768px) {
  body .nav-inner { gap: 10px; padding: 0 16px; height: 64px; }
  body .nav-logo img { height: 40px; }
  body .nav-actions { gap: 8px; margin-left: auto; }
  body #burger { margin-left: 0; flex-shrink: 0; padding: 8px 4px; }
  body .mobile-menu a { padding: 12px 4px; }
}
@media (max-width: 360px) {
  body .nav-logo img { height: 34px; }
  body .nav-signin { padding: 7px 10px; }
}

/* .icon-btn — theme toggle */
body #theme-toggle {
  width: 38px; height: 38px; border-radius: var(--r-md);
  border: 1px solid var(--rp-border); background: var(--rp-surface-card);
  color: var(--rp-ink-muted); transition: all .2s;
}
body #theme-toggle:hover { background: var(--rp-primary); color: #fff; border-color: var(--rp-primary); }

/* .btn-primary / .btn-outline */
body .btn-primary, body .nav-demo, body .contact-submit, body .btn-submit {
  border-radius: var(--r-md);
  transition: opacity .2s, transform .15s, box-shadow .2s, background .2s;
}
body .btn-primary:hover, body .nav-demo:hover, body .contact-submit:hover, body .btn-submit:hover {
  opacity: .9; transform: translateY(-1px); box-shadow: var(--rp-shadow-button-glow);
}
body .btn-ghost, body .nav-signin { border-radius: var(--r-md); }
body .btn-ghost:hover, body .nav-signin:hover { border-color: var(--rp-primary); color: var(--rp-primary); background: transparent; }

/* .form-input focus ring */
body input:not([type="checkbox"]):not([type="radio"]):focus,
body select:focus, body textarea:focus {
  outline: none; border-color: var(--rp-primary);
  box-shadow: 0 0 0 3px rgba(var(--rp-primary-rgb),.12);
}
/* iOS: ≥16px inputs prevent auto-zoom on focus */
@media (max-width: 768px) {
  body input:not([type="checkbox"]):not([type="radio"]), body select, body textarea { font-size: 16px; }
}

/* .badge — pill */
body .tag-pill { border-radius: var(--r-full); }

/* Logo PNG has a white background — show it as a rounded chip on dark surfaces */
html.dark .nav-logo img, [data-theme="dark"] .nav-logo img,
html.dark .auth-nav-logo img, [data-theme="dark"] .auth-nav-logo img {
  background: #fff; border-radius: var(--r-md); padding: 4px 8px;
}

/* Footer (always dark) — lighter brand orange for AA contrast on #0F172A */
body footer .footer-col h4, body footer .footer-powered-link { color: #FF8A55; }
body footer .footer-powered-link:hover { color: #fff; }
body footer .footer-logo img { background: #fff; border-radius: var(--r-md); padding: 6px 10px; height: 56px; }
body .social-btn { border-radius: var(--r-md); }
body .social-btn:hover { background: var(--rp-primary); border-color: var(--rp-primary); color: #fff; }

/* Footer app-store badges use fi-brands glyphs (V3 §3.1) */
i.app-store-icon { font-size: 20px; color: #fff; transition: color .2s; }
a.app-store-btn:hover i.app-store-icon { color: #000; }

/* Decorative train photo with right-edge fade (.hero-lh-train) */
.rp-hero-photo {
  position: absolute; right: 0; top: 0; height: 100%; width: 46%;
  object-fit: cover; object-position: left center; z-index: 0; opacity: .92;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.55) 20%, #000 42%);
          mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.55) 20%, #000 42%);
}
@media (max-width: 991px) { .rp-hero-photo { display: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}