@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700;800;900&family=Rubik+Mono+One&display=swap');

:root {
  --bg-canvas: #DDE2D6;
  --bg-page: #ECEAE4;
  --bg-card: #FFFFFF;
  --bg-subtle: #F5F2EC;
  --bg-ink: #0E1116;
  --bg-ink-2: #181B22;

  --mint: #8FE5A8;
  --mint-strong: #6BD085;
  --mint-soft: #C7F0D2;
  --mint-ink: #0E1116;

  --ink: #0E1116;
  --ink-2: #2A2F37;
  --ink-3: #5B6270;
  --ink-4: #8B919C;
  --line: #E6E2D9;
  --line-2: #EFEBE2;
  --danger: #E5654C;
  --warn: #F5B544;

  --r-xs: 10px;
  --r-sm: 14px;
  --r-md: 18px;
  --r-lg: 24px;
  --r-xl: 32px;

  --font-sans: 'Rubik', system-ui, -apple-system, sans-serif;
  --font-mono: 'Rubik', system-ui;
}

html, body { margin: 0; padding: 0; background: var(--bg-canvas); font-family: var(--font-sans); color: var(--ink); -webkit-font-smoothing: antialiased; }

* { box-sizing: border-box; }

/* Tabular numerics class — Rubik with tabular figures so prices/times align */
.mono { font-family: var(--font-sans); font-feature-settings: 'tnum' 1, 'lnum' 1; font-variant-numeric: tabular-nums; letter-spacing: 0; }

/* RTL helpers ----------------------------------------------------------- */
/* Auto-flip direction-conveying icons inside RTL containers. */
[dir="rtl"] .flip-rtl { transform: scaleX(-1); }

/* Inside an RTL container, restore LTR direction for runs of numerics
   (times like 06:45, references like QT-2026-058321) so the digits and the
   colon/dash render in their conventional left-to-right order. */
[dir="rtl"] .ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }