/* ==========================================================================
   DESIGN TOKENS
   ==========================================================================

   The organising idea
   -------------------
   This product moves a document from a person to a machine. So the interface is
   built on one deliberate split, and that split IS the visual identity:

     · Human language  → proportional type. Sentences, instructions, reassurance.
     · Machine fact    → monospace type.    Fax numbers, page counts, prices,
                                            timestamps, hashes, carrier codes.

   Anything the customer will later have to read back, quote, or verify is set in
   monospace. That is not decoration — it is a legibility contract. Digits align,
   transposition errors become visible, and the receipt reads like the permanent
   record it is.

   Everything else is restraint: borders instead of shadows, rules instead of
   cards, one accent used only where the transaction changes state.

   Brand neutrality
   ----------------
   No brand colour, wordmark or personality is committed here. The identity is
   carried by --ink, --paper and --signal. Swapping those three tokens plus the
   logo slot re-skins the entire product without touching a component.
   ========================================================================== */

:root {
  /* ---- Type families -----------------------------------------------------
     System stacks only. No webfont on the critical path: the LCP element is the
     upload control, and a font swap would both delay it and shift layout. */
  --font-text:
    ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
  --font-fact:
    ui-monospace, "SF Mono", SFMono-Regular, "Cascadia Mono", "Roboto Mono",
    Menlo, Consolas, monospace;

  /* ---- Type scale --------------------------------------------------------
     A fourth-based scale, tightened at the top. Deliberately short: five sizes
     is enough for a single-purpose product, and more sizes only invites
     inconsistency. */
  --size-display: 1.75rem;  /* 28px — the one large thing on any screen      */
  --size-title:   1.1875rem;/* 19px — section headings                       */
  --size-body:    1rem;     /* 16px — never smaller for primary reading      */
  --size-support: 0.875rem; /* 14px — secondary explanation                  */
  --size-micro:   0.75rem;  /* 12px — labels, legal, table headers           */

  --leading-tight: 1.2;
  --leading-snug:  1.35;
  --leading-body:  1.55;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-strong:  650;

  /* Monospace runs optically larger than proportional at the same px size. */
  --fact-optical-scale: 0.94;

  /* Tracking: tighten display, open up small caps labels. */
  --track-display: -0.015em;
  --track-label:    0.06em;

  /* ---- Spacing -----------------------------------------------------------
     4px base. Named by intent, not by number, so that "the gap between a label
     and its field" is one decision made once. */
  --space-hair:  2px;
  --space-tight: 4px;
  --space-snug:  8px;
  --space-cosy:  12px;
  --space-base:  16px;
  --space-roomy: 24px;
  --space-wide:  32px;
  --space-vast:  48px;
  --space-page:  64px;

  /* ---- Colour ------------------------------------------------------------
     Near-monochrome. Warm paper, cool-neutral ink. The warmth is what keeps it
     from reading as a developer tool. */
  --paper:        #fcfcfa;
  --paper-sunk:   #f4f4f0;
  --paper-raised: #ffffff;

  --ink:          #17171b;
  --ink-muted:    #55555f;
  --ink-faint:    #85858f;

  --rule:         #dededa;
  --rule-strong:  #c2c2bd;

  /* One accent. Ink-blue: reads as utility and officialdom, not as a startup.
     This is the token the founder's brand colour replaces. */
  --signal:       #1f4d8f;
  --signal-sunk:  #163a6d;
  --signal-wash:  #eef2f8;

  /* Transaction state. Used as 2px rules, small dots and text — never as fills
     behind content. Each is checked to at least 4.5:1 on --paper. */
  --state-held:      #8a5a00;  /* funds held, nothing taken */
  --state-held-wash: #fbf4e6;
  --state-good:      #1d6b45;  /* delivered */
  --state-good-wash: #ecf5f0;
  --state-stop:      #a32b1f;  /* failed */
  --state-stop-wash: #fbeeec;

  --focus: #1f4d8f;

  /* ---- Line & shape ------------------------------------------------------
     Borders carry the structure. Radius stays small: this is a form, not a card
     deck, and rounded pills would undercut the seriousness of the artifact. */
  --hair: 1px;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 6px;

  /* Exactly one elevation, reserved for the sticky action bar so it separates
     from content scrolling beneath it. Nothing else in the product casts a
     shadow. */
  --lift: 0 -1px 0 var(--rule), 0 -8px 24px -20px rgb(23 23 27 / 0.35);

  /* ---- Motion ------------------------------------------------------------
     Short and linear-ish. Nothing bounces. The only sustained animation is the
     transmitting indicator, because it represents real ongoing work. */
  --ease: cubic-bezier(0.2, 0, 0.2, 1);
  --dur-instant: 90ms;
  --dur-quick: 160ms;
  --dur-calm: 260ms;

  /* ---- Layout ------------------------------------------------------------ */
  --measure: 34rem;      /* readable line length for prose                   */
  --column: 27.5rem;     /* the transaction column — the dominant object     */
  --tap: 44px;           /* minimum touch target                             */
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 0ms;
    --dur-quick: 0ms;
    --dur-calm: 0ms;
  }
}

/* Dark mode is provided because the OS asks for it, not as a style statement.
   It is a faithful inversion of the same system — same structure, same
   restraint — rather than a different design. */
@media (prefers-color-scheme: dark) {
  :root {
    --paper:        #131316;
    --paper-sunk:   #0e0e11;
    --paper-raised: #1a1a1e;

    --ink:          #f2f2ef;
    --ink-muted:    #a6a6ad;
    --ink-faint:    #76767e;

    --rule:         #2c2c32;
    --rule-strong:  #3f3f47;

    --signal:       #8bb3ee;
    --signal-sunk:  #a9c8f4;
    --signal-wash:  #182236;

    --state-held:      #e0aa55;
    --state-held-wash: #241d0f;
    --state-good:      #6cc196;
    --state-good-wash: #10241a;
    --state-stop:      #f0938a;
    --state-stop-wash: #2a1614;

    --focus: #8bb3ee;
    --lift: 0 -1px 0 var(--rule), 0 -8px 24px -20px rgb(0 0 0 / 0.8);
  }
}