/* ============================================================================
   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;
  /* Text on --v2-surface-inverse (the toast). White here; dark in the dark
     theme, where the inverse surface is light. */
  --v2-ink-inverse:#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;
  /* Text on a filled --v2-negative (the unread badge). */
  --v2-negative-ink:  #FFFFFF;
  --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;
}

/* ---- Dark theme ------------------------------------------------------------
   Chosen, not assumed: the default stays light, and `data-theme` on <html>
   (set before first paint by v2-prefs-boot.js) selects dark, or follows the
   operating system when it is `system`. Only colour and elevation tokens
   change; spacing, type and motion are the same product.

   The ground is a deep blue-graphite, not black, so light ink does not
   vibrate and cards read as surfaces by tone alone. The accent inverts from
   dark ink-blue to a light steel blue so it stays readable as TEXT on dark
   surfaces; its ink becomes dark so filled buttons still pass AA. Semantic
   colours are lifted for contrast on dark ground and keep their meaning.
   Measured on --v2-surface: ink 14.4:1, ink-soft 8.8:1, ink-faint 5.9:1
   (5.4:1 on raised), accent 7.8:1, positive 8.2:1, negative 7.1:1,
   warning 8.6:1; accent-ink on accent 8.5:1.

   The two blocks below are identical on purpose (explicit dark, and system
   dark); a test keeps them in step. Document previews (PDF frames, the
   printed logo) keep their own white paper and are never recoloured. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --v2-bg:              #0F1316;
  --v2-bg-sunken:       #0B0E11;
  --v2-surface:         #171C21;
  --v2-surface-raised:  #1D232A;
  --v2-surface-sunken:  #13171B;
  --v2-surface-inverse: #E6EAEE;
  --v2-ink:        #E8ECEF;
  --v2-ink-soft:   #B3BBC4;
  --v2-ink-faint:  #8E98A3;
  --v2-ink-ghost:  #5E6873;
  --v2-ink-inverse:#171C22;
  --v2-line:        #2A3139;
  --v2-line-strong: #38414A;
  --v2-line-faint:  #21272E;
  --v2-accent:        #8FB3D1;
  --v2-accent-hover:  #A4C2DB;
  --v2-accent-press:  #B8D0E4;
  --v2-accent-ink:    #0F1316;
  --v2-accent-quiet:  #7FA2C0;
  --v2-accent-tint:   #1D2833;
  --v2-accent-tint-2: #25323F;
  --v2-accent-ring:   rgba(143, 179, 209, 0.35);
  --v2-positive:      #6FC49A;
  --v2-positive-tint: #15261E;
  --v2-negative:      #F08A80;
  --v2-negative-tint: #2C1917;
  --v2-negative-ink:  #1A0E0C;
  --v2-warning:       #E0B060;
  --v2-warning-tint:  #2A2214;
  --v2-info:          #8FB3D1;
  --v2-info-tint:     #1D2833;
  --v2-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30);
  --v2-shadow-md: 0 1px 3px rgba(0, 0, 0, 0.35), 0 4px 12px rgba(0, 0, 0, 0.25);
  --v2-shadow-lg: 0 2px 6px rgba(0, 0, 0, 0.40), 0 12px 32px rgba(0, 0, 0, 0.35);
  --v2-shadow-nav: 0 -1px 0 var(--v2-line), 0 -8px 24px rgba(0, 0, 0, 0.30);
  --v2-shadow-accent: 0 2px 8px rgba(0, 0, 0, 0.40), 0 6px 20px rgba(0, 0, 0, 0.30);
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] {
    color-scheme: dark;
    --v2-bg:              #0F1316;
    --v2-bg-sunken:       #0B0E11;
    --v2-surface:         #171C21;
    --v2-surface-raised:  #1D232A;
    --v2-surface-sunken:  #13171B;
    --v2-surface-inverse: #E6EAEE;
    --v2-ink:        #E8ECEF;
    --v2-ink-soft:   #B3BBC4;
    --v2-ink-faint:  #8E98A3;
    --v2-ink-ghost:  #5E6873;
    --v2-ink-inverse:#171C22;
    --v2-line:        #2A3139;
    --v2-line-strong: #38414A;
    --v2-line-faint:  #21272E;
    --v2-accent:        #8FB3D1;
    --v2-accent-hover:  #A4C2DB;
    --v2-accent-press:  #B8D0E4;
    --v2-accent-ink:    #0F1316;
    --v2-accent-quiet:  #7FA2C0;
    --v2-accent-tint:   #1D2833;
    --v2-accent-tint-2: #25323F;
    --v2-accent-ring:   rgba(143, 179, 209, 0.35);
    --v2-positive:      #6FC49A;
    --v2-positive-tint: #15261E;
    --v2-negative:      #F08A80;
    --v2-negative-tint: #2C1917;
    --v2-negative-ink:  #1A0E0C;
    --v2-warning:       #E0B060;
    --v2-warning-tint:  #2A2214;
    --v2-info:          #8FB3D1;
    --v2-info-tint:     #1D2833;
    --v2-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30);
    --v2-shadow-md: 0 1px 3px rgba(0, 0, 0, 0.35), 0 4px 12px rgba(0, 0, 0, 0.25);
    --v2-shadow-lg: 0 2px 6px rgba(0, 0, 0, 0.40), 0 12px 32px rgba(0, 0, 0, 0.35);
    --v2-shadow-nav: 0 -1px 0 var(--v2-line), 0 -8px 24px rgba(0, 0, 0, 0.30);
    --v2-shadow-accent: 0 2px 8px rgba(0, 0, 0, 0.40), 0 6px 20px rgba(0, 0, 0, 0.30);
  }
}

/* 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; }
}