/* ============================================================================
   Mailo Mobile V2 — design tokens.

   One accent family, not three. The previous surface reached for blue, green,
   amber and red as decoration, which meant colour carried no information: if
   every card is coloured, a coloured card cannot mean "look here". Here the
   accent is a single desaturated ink-blue ramp, and green/red appear ONLY on
   signed money and on state that is genuinely good or genuinely wrong.

   Everything below is a variable. Components never hard-code a colour, a
   radius or a shadow, so the whole product can be re-toned by editing this
   file alone.
   ========================================================================== */

:root {
  /* ---- Neutral ground ---------------------------------------------------
     Warm off-white rather than pure white. Pure #fff behind white cards makes
     the cards disappear; a 2% warm tint lets an unshadowed card read as a
     surface, which is what allows the shadows to stay as light as they are. */
  --v2-bg:              #F7F6F3;
  --v2-bg-sunken:       #F1EFEB;
  --v2-surface:         #FFFFFF;
  --v2-surface-raised:  #FFFFFF;
  --v2-surface-sunken:  #FAF9F7;
  --v2-surface-inverse: #171C22;

  /* ---- Ink --------------------------------------------------------------
     Graphite, never true black. #000 on off-white is a harsher contrast than
     print ever uses and makes long Hebrew paragraphs vibrate. */
  --v2-ink:        #171C22;
  --v2-ink-soft:   #59626E;
  /* Measured, not eyeballed. This was #8A939F — a pleasant grey, and 3.11:1
     on white, which is below AA on exactly the small secondary labels that
     carry document types, dates and counts. #69727F is 4.87:1 on white and
     4.50:1 on the off-white ground, so it passes on both surfaces it is used
     against. */
  --v2-ink-faint:  #69727F;
  /* Ghost is decoration only — chevrons, dividers, a placeholder that repeats
     a visible label. It never carries information on its own, which is why it
     is allowed to sit below AA. */
  --v2-ink-ghost:  #949CA6;
  --v2-ink-on-dark:#FFFFFF;

  /* ---- Lines ------------------------------------------------------------ */
  --v2-line:        #E6E3DE;
  --v2-line-strong: #D5D1CA;
  --v2-line-faint:  #EFEDE9;

  /* ---- Accent: one family only -----------------------------------------
     Ink blue. Desaturated enough to sit under financial figures without
     competing with them, dark enough to carry white text at AA. */
  --v2-accent:        #2E4A61;
  --v2-accent-hover:  #243B4E;
  --v2-accent-press:  #1C2E3D;
  --v2-accent-ink:    #FFFFFF;
  --v2-accent-quiet:  #4A6B85;
  --v2-accent-tint:   #EDF1F5;
  --v2-accent-tint-2: #DEE6ED;
  --v2-accent-ring:   rgba(46, 74, 97, 0.30);

  /* ---- Semantic ---------------------------------------------------------
     Muted on purpose. A profit figure should read as confident, not as a
     traffic light. These are used on TEXT and on small dots — never as a card
     background, because a green card says "good" about everything on it. */
  --v2-positive:      #2C6A4F;
  --v2-positive-tint: #E8F1EC;
  --v2-negative:      #9A3B33;
  --v2-negative-tint: #F6EAE9;
  --v2-warning:       #8A6320;
  --v2-warning-tint:  #F6EFE2;
  --v2-info:          #2E4A61;
  --v2-info-tint:     #EDF1F5;

  /* ---- Elevation --------------------------------------------------------
     Three steps, all barely there. A card lifted 24px off the page is a 2014
     material-design reflex; 2026 fintech separates with tone and space. */
  --v2-shadow-sm: 0 1px 2px rgba(23, 28, 34, 0.05);
  --v2-shadow-md: 0 1px 3px rgba(23, 28, 34, 0.06), 0 4px 12px rgba(23, 28, 34, 0.04);
  --v2-shadow-lg: 0 2px 6px rgba(23, 28, 34, 0.07), 0 12px 32px rgba(23, 28, 34, 0.07);
  --v2-shadow-nav: 0 -1px 0 var(--v2-line), 0 -8px 24px rgba(23, 28, 34, 0.04);
  /* The one accent-tinted elevation in the system: the centre action lifts
     off its own bar, so its shadow carries the accent rather than neutral ink. */
  --v2-shadow-accent: 0 2px 8px rgba(46, 74, 97, 0.30), 0 6px 20px rgba(46, 74, 97, 0.18);

  /* ---- Spacing: 4px scale ---------------------------------------------- */
  --v2-sp-1: 4px;   --v2-sp-2: 8px;   --v2-sp-3: 12px;  --v2-sp-4: 16px;
  --v2-sp-5: 20px;  --v2-sp-6: 24px;  --v2-sp-7: 32px;  --v2-sp-8: 40px;
  --v2-sp-9: 48px;  --v2-sp-10: 64px;

  /* ---- Radius ----------------------------------------------------------- */
  --v2-r-xs:   8px;
  --v2-r-sm:  12px;
  --v2-r-md:  16px;
  --v2-r-lg:  20px;
  --v2-r-xl:  28px;
  --v2-r-full: 999px;

  /* ---- Type -------------------------------------------------------------
     Rubik throughout. It has a real Hebrew cut drawn by the same designer as
     the Latin, which is why Hebrew here does not look like a fallback bolted
     onto a Latin face — the two scripts share weight and rhythm. */
  --v2-font: 'Rubik', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --v2-font-num: 'Rubik', system-ui, sans-serif;

  --v2-fs-2xs: 11px;
  --v2-fs-xs:  12px;
  --v2-fs-sm:  13px;
  --v2-fs-md:  15px;
  --v2-fs-lg:  17px;
  --v2-fs-xl:  20px;
  --v2-fs-2xl: 24px;
  --v2-fs-3xl: 30px;
  --v2-fs-4xl: 38px;

  --v2-lh-tight: 1.15;
  --v2-lh-snug:  1.35;
  --v2-lh-body:  1.55;

  /* ---- Motion -----------------------------------------------------------
     Short and few. Animation on a business screen is latency the user did not
     ask for. */
  --v2-ease: cubic-bezier(0.32, 0.72, 0, 1);
  --v2-dur-fast: 120ms;
  --v2-dur: 200ms;
  --v2-dur-sheet: 280ms;

  /* ---- Layout ----------------------------------------------------------- */
  --v2-nav-h: 60px;
  --v2-header-h: 56px;
  --v2-gutter: 16px;
  --v2-max-w: 720px;
  --v2-safe-b: env(safe-area-inset-bottom, 0px);
  --v2-safe-t: env(safe-area-inset-top, 0px);

  /* ---- Adaptive layout --------------------------------------------------
     Mailo is one product with two postures. A phone gets a single column and
     a bottom bar; a desktop gets a side rail and a real workspace. The widths
     that decide which posture is in force live here rather than being retyped
     into every component.

     --v2-content-w keeps ordinary reading screens from stretching across a
     1600px monitor. --v2-ws-w is deliberately wider: the document workspace
     is the one place where width IS the feature, because the whole point is
     to read the source and the extracted values at the same time. */
  --v2-rail-w: 232px;
  --v2-content-w: 1040px;
  --v2-ws-w: 1620px;
  --v2-ws-gap: 24px;
  /* The source pane height on a phone: enough to recognise the document at a
     glance, never so much that the fields below it start off-screen. */
  --v2-src-h: 44dvh;
}

/* Larger phones and up get slightly more air; the type scale does not grow,
   because a bigger phone is not a further-away phone. */
@media (min-width: 420px) {
  :root { --v2-gutter: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  :root { --v2-dur-fast: 0ms; --v2-dur: 0ms; --v2-dur-sheet: 0ms; }
}