/* field.tokens.css: one vocabulary for every ConCal Field surface.
 *
 * Extracted from field.css so capture.html (a real, shipping page) and the
 * field/ prototypes cannot drift apart on colour, radius or tap size. Tokens
 * only: no component ever belongs in here, because the two surfaces have
 * genuinely different DOM and sharing their COMPONENTS would mean contorting
 * one to fit the other. Sharing the vocabulary is the part that matters.
 *
 * Theme follows the OS here, unlike field_origin.js which lives inside the app
 * and follows the app's own html[data-theme] toggle. Field is its own installed
 * app: it has no in-app theme switch, so the phone's setting is the only signal
 * there is, and at 2pm on a job site that setting is what the sun decided.
 */

:root {
  /* Brand */
  --blue: #3a62e0;
  --blue-ink: #2f50c4;
  --blue-wash: #e6ecfc;

  /* Neutrals, biased slightly toward the accent so they read as chosen */
  --ink: #171a21;
  --ink-2: #3d4457;
  /* Calibrated against BOTH grounds it lands on, not just the page.
     #6b7285 cleared 4.80:1 on --surface (white) and dropped to 4.17:1 on
     --surface-2, which is what an open editor row uses, so the provenance
     citation (heard: "forty") failed AA exactly where it matters most.
     #646b7e clears both. Same blue-grey family, so the hierarchy holds. */
  --muted: #646b7e;
  --bg: #f2f4f9;
  --surface: #ffffff;
  /* The same surface at zero alpha. A gradient fading to a hardcoded
     rgba(255,255,255,0) is white-on-dark in the dark theme: it happened to
     look fine and was still wrong, because it was luck rather than design. */
  --surface-0: rgba(255, 255, 255, 0);
  --surface-2: #eceff6;
  --line: #dfe3ee;
  --line-soft: #e9ecf4;
  --press: #e7eaf3;

  /* Provenance. Semantic, and separate from the accent. */
  --spoken: #196f43;   --spoken-bg: #e2f3e9;
  --entered: #2f50c4;  --entered-bg: #e6ecfc;
  --inferred: #8a5a00; --inferred-bg: #fbf0d9;
  --gap: #b3261e;      --gap-bg: #fbe9e7;
  --quiet: #6b7285;    --quiet-bg: #eceff6;

  --scrim: rgba(18, 22, 33, .45);
  --shadow-1: 0 1px 2px rgba(18, 22, 33, .06);
  --shadow-2: 0 4px 16px rgba(18, 22, 33, .10);
  --shadow-fab: 0 6px 20px rgba(58, 98, 224, .38);

  /* Scale */
  --r-sm: 9px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px;
  --tap: 44px;
  --gut: 14px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* The FILL is #3a62e0 in both themes. Dark used to lighten it to #4d74f0,
       which is the wrong direction for white text: white on it measured
       4.14:1 and failed AA on "Parse text", "Send to ConCal" and the active
       piece tab. #3a62e0 measures 4.95:1 and is what PRODUCT.md commits to
       for --accent-fill in both themes. --blue-ink below is the letterform
       token and stays light; one token cannot be both. */
    --blue: #3a62e0;
    --blue-ink: #9db4ff;
    --blue-wash: #202a4e;
    --ink: #e9ecf4;
    --ink-2: #bcc3d4;
    --muted: #8f97ad;
    --bg: #0d0f14;
    --surface: #171a22;
    --surface-0: rgba(23, 26, 34, 0);
    --surface-2: #1e222c;
    --line: #2b303c;
    --line-soft: #232833;
    --press: #232833;
    --spoken: #6cd79c;   --spoken-bg: #15301f;
    --entered: #9db4ff;  --entered-bg: #202a4e;
    --inferred: #e6b55e; --inferred-bg: #322913;
    --gap: #ff9086;      --gap-bg: #3a1d1a;
    --quiet: #8f97ad;    --quiet-bg: #232833;
    --scrim: rgba(0, 0, 0, .6);
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .3);
    --shadow-2: 0 4px 16px rgba(0, 0, 0, .35);
    --shadow-fab: 0 6px 20px rgba(0, 0, 0, .5);
  }
}


:root[data-theme="dark"] {
  --blue: #3a62e0;   /* see the note in the media-query block above */
  --blue-ink: #9db4ff;
  --blue-wash: #202a4e;
  --ink: #e9ecf4;
  --ink-2: #bcc3d4;
  --muted: #8f97ad;
  --bg: #0d0f14;
  --surface: #171a22;
  --surface-0: rgba(23, 26, 34, 0);
  --surface-2: #1e222c;
  --line: #2b303c;
  --line-soft: #232833;
  --press: #232833;
  --spoken: #6cd79c;   --spoken-bg: #15301f;
  --entered: #9db4ff;  --entered-bg: #202a4e;
  --inferred: #e6b55e; --inferred-bg: #322913;
  --gap: #ff9086;      --gap-bg: #3a1d1a;
  --quiet: #8f97ad;    --quiet-bg: #232833;
  --scrim: rgba(0, 0, 0, .6);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-2: 0 4px 16px rgba(0, 0, 0, .35);
  --shadow-fab: 0 6px 20px rgba(0, 0, 0, .5);
}