/* ============================================================
   OPTIMAL TRADE — Color & Type Foundations
   Premium fintech + international logistics
   ============================================================ */

/* ---------- Fonts ---------- */
/* Unbounded = brand / display / numbers / buttons / nav (local variable font) */
@font-face {
  font-family: "Unbounded";
  src: url("fonts/Unbounded-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
/* Manrope = body / UI text / labels (matches Figma; loaded via Google Fonts CDN
   in HTML: https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800) */

:root {
  /* ============================================================
     COLOR — Brand
     ============================================================ */
  --ot-orange:            #FF5C00;  /* primary brand — logistics orange */
  --ot-orange-bright:     #FF7A00;  /* lighter accent / gradient top */
  --ot-orange-deep:       #DF5100;  /* hover / pressed / gradient bottom */
  --ot-orange-300:        #FF9F48;  /* tint */
  --ot-orange-200:        #FFBC8C;  /* tint */
  --ot-orange-100:        #FFD0BA;  /* soft tint */
  --ot-orange-50:         #FFEFE6;  /* surface tint */
  --ot-orange-25:         #FFF5F0;  /* faintest wash */
  /* brief alt primary (near-identical): #F25C1F */

  /* ============================================================
     COLOR — Ink / Navy (secondary text + dark sections)
     ============================================================ */
  --ot-navy:              #1A2238;  /* primary headings / deep navy */
  --ot-navy-700:          #252A3D;  /* slightly lifted navy */
  --ot-ink:               #22282F;  /* near-black premium dark section bg */
  --ot-black:             #0B0E14;  /* pure premium black panels */

  /* ============================================================
     COLOR — Neutrals
     ============================================================ */
  --ot-white:             #FFFFFF;
  --ot-gray-50:           #F7F8FA;  /* app canvas / soft light gray */
  --ot-gray-100:          #F2F2F2;  /* card alt / fills */
  --ot-gray-200:          #E5E5E5;  /* borders / dividers */
  --ot-gray-300:          #D9D9D9;  /* strong border */
  --ot-gray-400:          #A6A6A6;  /* disabled / faint icon */
  --ot-gray-500:          #797979;  /* secondary text */
  --ot-gray-600:          #5C6270;  /* tertiary label on light */

  /* ============================================================
     COLOR — Accents (trade routes, logistics, info)
     ============================================================ */
  --ot-route-purple:      #4842C8;  /* trade-route arrow / logistics chip */
  --ot-route-violet:      #6063BD;  /* secondary route line */
  --ot-info-blue:         #0055E4;  /* informational / links */

  /* ============================================================
     COLOR — Semantic
     ============================================================ */
  --ot-success:           #1F8A5B;  /* settled / paid / in-transit ok */
  --ot-success-bg:        #E7F4EE;
  --ot-warning:           #E08600;  /* pending / awaiting */
  --ot-warning-bg:        #FFF3E0;
  --ot-error:             #FF3A3A;  /* failed / declined */
  --ot-error-bg:          #FFECEC;
  --ot-info:              #0055E4;
  --ot-info-bg:           #E8F0FF;

  /* ============================================================
     COLOR — Gradients
     ============================================================ */
  --ot-grad-orange:   linear-gradient(135deg, #FF7A00 0%, #FF5C00 55%, #DF5100 100%);
  --ot-grad-hero:     linear-gradient(160deg, #FF5C00 0%, #DF5100 100%);
  /* App "operations" panel gradient seen in the deck phone mockup */
  --ot-grad-app:      linear-gradient(150deg, #FF4D6D 0%, #C13AD6 48%, #7E7BF0 78%, #BFD4F2 100%);
  --ot-grad-dark:     linear-gradient(180deg, #22282F 0%, #0B0E14 100%);

  /* ============================================================
     SEMANTIC ROLES
     ============================================================ */
  --ot-bg:                var(--ot-gray-50);
  --ot-surface:           var(--ot-white);
  --ot-surface-alt:       var(--ot-gray-100);
  --ot-border:            var(--ot-gray-200);
  --ot-fg:                var(--ot-navy);     /* primary text */
  --ot-fg-2:              var(--ot-gray-500); /* secondary text */
  --ot-fg-3:              var(--ot-gray-400); /* tertiary text */
  --ot-accent:            var(--ot-orange);
  --ot-on-accent:         var(--ot-white);

  /* ============================================================
     TYPE — families
     ============================================================ */
  --ot-font-display: "Unbounded", system-ui, sans-serif; /* headings, numbers, buttons, nav */
  --ot-font-body:    "Manrope", system-ui, -apple-system, sans-serif; /* body, UI */

  /* TYPE — weights */
  --ot-w-regular: 400;
  --ot-w-medium:  500;
  --ot-w-semibold:600;
  --ot-w-bold:    700;
  --ot-w-extra:   800;

  /* ============================================================
     TYPE — scale (semantic)  [size / line-height / weight / family / spacing]
     Unbounded runs visually large + wide; tighten tracking on big sizes.
     ============================================================ */
  --ot-display:      700 56px/1.05 var(--ot-font-display); /* hero marketing */
  --ot-h1:           700 36px/1.12 var(--ot-font-display);
  --ot-h2:           700 28px/1.16 var(--ot-font-display);
  --ot-h3:           600 22px/1.2  var(--ot-font-display);
  --ot-h4:           600 18px/1.25 var(--ot-font-display);
  --ot-num-xl:       600 40px/1.0  var(--ot-font-display); /* big balances */
  --ot-num-lg:       600 28px/1.05 var(--ot-font-display);
  --ot-label:        600 13px/1.2  var(--ot-font-display); /* nav, buttons, eyebrows */

  --ot-body-lg:      500 17px/1.5  var(--ot-font-body);
  --ot-body:         500 15px/1.55 var(--ot-font-body);
  --ot-body-sm:      500 13px/1.5  var(--ot-font-body);
  --ot-caption:      600 11px/1.3  var(--ot-font-body);
  --ot-mono:         600 13px/1.4  var(--ot-font-body);

  /* TYPE — tracking */
  --ot-track-tight:  -0.02em;  /* large display */
  --ot-track-eyebrow: 0.14em;  /* uppercase eyebrows / nav */

  /* ============================================================
     RADII
     ============================================================ */
  --ot-r-xs: 8px;
  --ot-r-sm: 12px;
  --ot-r-md: 16px;   /* default card / icon tile */
  --ot-r-lg: 20px;
  --ot-r-xl: 28px;   /* sheets / large cards */
  --ot-r-pill: 999px;

  /* ============================================================
     SHADOWS / ELEVATION
     ============================================================ */
  --ot-shadow-xs:  0 1px 2px rgba(26,34,56,0.06);
  --ot-shadow-sm:  0 2px 8px rgba(26,34,56,0.06);
  --ot-shadow-md:  0 8px 24px rgba(26,34,56,0.08);
  --ot-shadow-lg:  0 18px 48px rgba(26,34,56,0.12);
  --ot-shadow-orange: 0 10px 28px rgba(255,92,0,0.32); /* glow under primary CTA */

  /* ============================================================
     SPACING (4px base)
     ============================================================ */
  --ot-s-1: 4px;
  --ot-s-2: 8px;
  --ot-s-3: 12px;
  --ot-s-4: 16px;
  --ot-s-5: 20px;
  --ot-s-6: 24px;
  --ot-s-8: 32px;
  --ot-s-10: 40px;
  --ot-s-12: 48px;
  --ot-s-16: 64px;

  /* ============================================================
     MOTION (per Optimal Trade UX/UI spec — Material 3 Expressive basis)
     Motion is functional feedback: "heard you", "money in flight",
     "status changed". The bigger the money event, the bolder the motion.
     Animate only transform & opacity → 60fps on mid-range Android.
     ============================================================ */
  --ot-dur-instant:  100ms; /* taps, checkboxes, toggles, ripple (80–120) */
  --ot-dur-quick:    180ms; /* tooltips, chip swaps, hover/focus (150–200) */
  --ot-dur-standard: 280ms; /* bottom sheets, cards, in-screen content (250–300) */
  --ot-dur-screen:   360ms; /* screen transitions, shared element (300–400) */
  --ot-dur-emphatic: 520ms; /* ceremonies: pay success, deal done (450–600) */

  --ot-ease-enter: cubic-bezier(0.05, 0.7, 0.1, 1);   /* appears: fast in, soft stop */
  --ot-ease-exit:  cubic-bezier(0.3, 0, 0.8, 0.15);   /* leaves: accelerate out (~20% shorter) */
  --ot-ease-move:  cubic-bezier(0.2, 0, 0, 1);        /* moving within a screen */
  /* spring-gesture: stiffness 380 / damping 30 — for sheets/swipe/pull.
     CSS approximation: */
  --ot-spring: cubic-bezier(0.22, 1.2, 0.36, 1);
  --ot-stagger: 24ms; /* list choreography between cards (cap 6 items) */
}

/* reduce-motion: replace transitions with a 150ms crossfade; kill parallax/ceremonies */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .15s !important; animation-iteration-count: 1 !important; transition-duration: .15s !important; }
}

/* ---------- Base helpers ---------- */
.ot-display { font: var(--ot-display); letter-spacing: var(--ot-track-tight); color: var(--ot-fg); }
.ot-h1 { font: var(--ot-h1); letter-spacing: var(--ot-track-tight); color: var(--ot-fg); }
.ot-h2 { font: var(--ot-h2); letter-spacing: var(--ot-track-tight); color: var(--ot-fg); }
.ot-h3 { font: var(--ot-h3); color: var(--ot-fg); }
.ot-h4 { font: var(--ot-h4); color: var(--ot-fg); }
.ot-eyebrow { font: var(--ot-label); letter-spacing: var(--ot-track-eyebrow); text-transform: uppercase; color: var(--ot-accent); }
.ot-body-lg { font: var(--ot-body-lg); color: var(--ot-fg); }
.ot-body { font: var(--ot-body); color: var(--ot-fg); }
.ot-body-sm { font: var(--ot-body-sm); color: var(--ot-fg-2); }
.ot-caption { font: var(--ot-caption); color: var(--ot-fg-2); }
.ot-num-xl { font: var(--ot-num-xl); letter-spacing: var(--ot-track-tight); color: var(--ot-fg); }