/* One palette for every EAMS surface. R2.1, friction F-27.
 *
 * Until this file existed the web application and the field application each
 * kept their own colours. The web was built on a blue primary (#1B78CE) and
 * the field application on a navy one (#1B3A6B), down to a different
 * `theme-color` in the page head, so an officer who opened both saw two
 * products from two companies. Nothing forced them apart; they were simply
 * written months apart in two files nobody compared.
 *
 * So the values live here once and nowhere else:
 *
 *   /eams    frontend/src/index.css imports this file and maps the
 *            shadcn-vue token names onto it. The import is resolved at build
 *            time, so the browser still downloads one stylesheet.
 *   /field   frontend/src/field/field.css imports this file too, and the
 *            build inlines it, so the field application carries the palette
 *            in its own stylesheet and opens with no signal (ADR 009).
 *
 * Adding a colour means adding it here. A hex code written straight into a
 * component is how the two identities appeared in the first place, and
 * frontend/scripts/check-contrast.mjs reads this file to prove every pair
 * that is actually drawn can be read.
 *
 * WHY THE PRIMARY IS NOT THE CORPORATE HEX. PT Divistant's blue is #1C7DD6.
 * White text on it reaches 4.24:1, under the 4.5:1 needed for normal text,
 * which put every primary button in the product below the threshold. Hue and
 * saturation are kept and only lightness is lowered, so side by side with a
 * printed document template the two read as the same colour.
 *
 * WHY SOME STATUS COLOURS COME IN PAIRS. A green that is legible as text on
 * white is too dark to notice as a filled bar, and one that reads well as a
 * fill fails as text on a tinted panel. Rather than let each surface pick its
 * own, the scale carries both: --pid-ok is the fill, --pid-ok-soft the tinted
 * panel, and --pid-ok-soft-ink the text drawn on that panel.
 *
 * DARK MODE IS EXPLICIT ON BOTH SURFACES. /eams puts `.dark` on <html> from
 * the user's own choice of Terang, Gelap or Ikuti Perangkat. The field
 * application has no such setting and follows the device, so its page sets
 * data-pid-theme before the first paint. Neither surface may rely on a bare
 * `prefers-color-scheme` rule here: a media query in this file would repaint
 * /eams dark for a user who explicitly asked for Terang on a device set to
 * dark.
 */

:root {
  /* Surfaces, from the page backwards. `shell` is the application chrome:
     the sidebar on the web, the page itself in the field application. */
  --pid-bg: #ffffff;
  --pid-surface: #ffffff;
  --pid-surface-muted: #f1f5f9;
  --pid-shell: #f8fafc;

  /* Text. `soft` is secondary prose, `faint` is a label or a caption. */
  --pid-ink: #0f172a;
  --pid-ink-soft: #475569;
  --pid-ink-faint: #64748b;

  /* `line` is a control border: the edge of an input, an option or a tile,
     which WCAG 2.2 asks to reach 3:1 because it is what tells a control from
     the page around it. The field application had it at #cbd5e1, which is
     1.4:1 on white; on a quayside in sunlight that is no edge at all. A line
     that only separates two rows may be faint, and that one is `line-soft`. */
  --pid-line: #748399;
  --pid-line-soft: #dce3ec;

  --pid-brand: #1b78ce;
  --pid-brand-ink: #ffffff;
  --pid-brand-soft: #eef7fe;
  --pid-brand-soft-ink: #0f5090;

  --pid-ok: #12883e;
  --pid-ok-soft: #ddefe8;
  --pid-ok-soft-ink: #0b6e55;
  --pid-warn: #b36205;
  --pid-warn-soft: #fdf0dc;
  --pid-warn-soft-ink: #8a4b0a;
  --pid-bad: #dc2626;
  --pid-bad-ink: #ffffff;
  --pid-bad-soft: #f9e3e3;
  --pid-bad-soft-ink: #a32f2f;

  /* Asset condition, worst last. Kept apart from the brand blue because these
     say how bad something is, and an accent colour that also means "this is a
     link" cannot say that as well. Every place they are drawn also prints the
     figure, so the colour is a second reading, never the only one. The
     unsurveyed grey was once 1.36:1 against its own track, which made the
     part of the chart saying "nobody has looked at these" the part nobody
     could see. */
  --pid-condition-good: #16a34a;
  --pid-condition-minor: #d97706;
  --pid-condition-major: #dc2626;
  --pid-condition-lost: #7f1d1d;
  --pid-condition-unknown: #7690b0;

  /* The asset map's own ground (FR-21). Indonesia is drawn a step lighter
     than its neighbours, and both sit on a sea tinted towards the brand
     blue, so the archipelago reads as the subject before any marker is
     drawn. They are grounds, not signals: every marker on them carries its
     own ring in the surface colour. */
  --pid-map-sea: #dde8f4;
  --pid-map-land: #edf1f5;
  --pid-map-land-home: #f8fafc;
  --pid-map-coast: #9aaec6;

  /* The iPhone roles (phone UX guideline, docs/ux/pedoman-ux-ponsel.md).
     Below md the office application borrows the structure of an iOS
     application: a grouped page, inset cards of rows, secondary and
     tertiary labels, hairline separators and one tint. Each role is a name
     for a value this palette already has, so the phone view cannot grow a
     third brand. Apple's own values are not copied: its secondary label is
     60% grey, about 3.4:1 on white, and its tint reaches 4:1, both under
     the 4.5:1 this product holds text to.

     The one new value is the tint. The brand blue reaches 4.54:1 on white
     and only 4.15:1 on the grouped page, where a text action such as Batal
     beside a search field sits. So the tint keeps the brand's hue and
     saturation and loses a little lightness, as the brand itself did. It
     is the phone's text and icon blue; a filled button stays --pid-brand.

     Tertiary label is for glyphs only (a chevron, the icon of an empty
     state), held to 3:1; it never spells a word on the grouped page. */
  --pid-ios-grouped: var(--pid-surface-muted);
  --pid-ios-grouped-card: var(--pid-surface);
  --pid-ios-label-secondary: var(--pid-ink-soft);
  --pid-ios-label-tertiary: var(--pid-ink-faint);
  --pid-ios-separator: var(--pid-line-soft);
  --pid-ios-fill: var(--pid-line-soft);
  --pid-ios-fill-secondary: var(--pid-surface-muted);
  /* A pressed destructive row (Keluar). The red label reaches only about
     3.7:1 on the grey fill in either mode, so a pressed destructive row
     turns to the tinted red panel and its label to that panel's ink. */
  --pid-ios-fill-destructive: var(--pid-bad-soft);
  --pid-ios-fill-destructive-ink: var(--pid-bad-soft-ink);
  --pid-ios-tint: #1a6fbf;

  /* The coloured square in front of a row, one pair per tone: the square
     and the glyph drawn on it. In light mode a solid square with the card
     colour cut out of it, as iOS Settings draws them. In dark mode the
     solid squares either glare or lose their white glyph (white on the dark
     brand blue is 2.66:1), so they become the tinted panels the status
     colours already have. */
  --pid-ios-icon-brand: var(--pid-brand);
  --pid-ios-icon-brand-ink: var(--pid-surface);
  --pid-ios-icon-ok: var(--pid-ok);
  --pid-ios-icon-ok-ink: var(--pid-surface);
  --pid-ios-icon-warn: var(--pid-warn);
  --pid-ios-icon-warn-ink: var(--pid-surface);
  --pid-ios-icon-bad: var(--pid-bad);
  --pid-ios-icon-bad-ink: var(--pid-surface);
  --pid-ios-icon-neutral: var(--pid-ink-faint);
  --pid-ios-icon-neutral-ink: var(--pid-surface);

  /* The same roles in the field application (field UX guideline, 27
     September 2026), which holds text to 7:1 because it is read outdoors.
     Two of the office values fall short there. The secondary label reaches
     6.92:1 on the grouped page, so the field's is a step darker in the same
     slate. The office tint reaches 4.71:1, and even the darker text blue
     (--pid-brand-soft-ink) reaches only 6.32:1 on a pressed row, so the
     field's tint is a deeper navy of the same hue, 7.46:1 there. In dark
     mode the brand blue reaches only 6.53:1 on a card, so the field's tint
     is a lighter step of the same hue.

     The grouped page is the field's own too, so its cards stand off it
     outdoors. In light mode it is a step darker than the office one, 1.13:1
     from the white card where the office page is 1.10:1 (an iPhone's own
     pair is 1.12:1). In dark mode it is black, as on an iPhone: the office
     page (--pid-bg) is only 1.08:1 from the card. The pressed row in dark
     mode is a step lighter than the office fill for the same reason, 1.39:1
     from the card rather than 1.26; in light mode it is the office fill. */
  --pid-field-label-secondary: #3b475a;
  --pid-field-tint: #0b4580;
  --pid-field-grouped: #edf1f6;
  --pid-field-fill: var(--pid-ios-fill);
  /* The fill of a tinted button (UIButton's tinted style): the tint's hue,
     light enough that the tint reads on it at 7.59:1 (7.83:1 dark), and
     1.27:1 from the white card (1.29:1 dark), so the button shows as a
     shape without an edge. */
  --pid-field-tinted: #d6e6f8;

  /* The scanner is dark in either theme, as a camera is: black round the
     picture, white words, grey and tinted buttons on a solid bar. So these
     are set once here and not again under the dark values. The tint is the
     field's dark tint, 8.48:1 on its fill; the read frame is the dark
     green, 9.22:1 on black. */
  --pid-field-scan-bg: #000000;
  --pid-field-scan-ink: #ffffff;
  --pid-field-scan-ink-soft: #cbd5e1;
  --pid-field-scan-fill: #262c36;
  --pid-field-scan-tinted: #0f2a47;
  --pid-field-scan-tint: #8fcdf6;
  --pid-field-scan-ok: #22c55e;

  --pid-radius: 0.625rem;

  /* Declared rather than inherited, and deliberately not a web font. The
     field application has to open inside a cold store with no signal, and a
     downloaded font is one more request to fail; a face that arrives late
     also reflows a form under a gloved thumb. The stack names the faces each
     platform actually ships instead of trusting `system-ui` alone, which
     resolves to different widths across Android builds. Anything narrower
     than this belongs in a component, not here. */
  --pid-font-sans:
    ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto,
    'Helvetica Neue', 'Noto Sans', Arial, sans-serif, 'Apple Color Emoji',
    'Segoe UI Emoji';
}

/* Dark values. `.dark` is what /eams sets; `[data-pid-theme='dark']` is what
   the field page sets from the device preference. One list of values, two
   ways in, so neither surface can drift into a dark mode of its own. */
.dark,
[data-pid-theme='dark'] {
  --pid-bg: #0b1220;
  --pid-surface: #111a2b;
  --pid-surface-muted: #1e293b;
  --pid-shell: #0f172a;

  --pid-ink: #e2e8f0;
  --pid-ink-soft: #cbd5e1;
  --pid-ink-faint: #94a3b8;

  --pid-line: #6b7c94;
  --pid-line-soft: #212d42;

  --pid-brand: #45a6e9;
  --pid-brand-ink: #0b1220;
  --pid-brand-soft: #133a60;
  --pid-brand-soft-ink: #d5ecfc;

  --pid-ok: #22c55e;
  --pid-ok-soft: #0c2e24;
  --pid-ok-soft-ink: #6ee7b7;
  --pid-warn: #f59e0b;
  --pid-warn-soft: #332008;
  --pid-warn-soft-ink: #fcd9a0;
  --pid-bad: #ef4444;
  --pid-bad-ink: #0b1220;
  --pid-bad-soft: #3a1414;
  --pid-bad-soft-ink: #fca5a5;

  --pid-condition-good: #22c55e;
  --pid-condition-minor: #f59e0b;
  --pid-condition-major: #ef4444;
  --pid-condition-lost: #c71e1e;
  --pid-condition-unknown: #60738e;

  /* Chosen for the dark page rather than inverted from the light values: a
     deep sea, land a step up from it, and a coast only just visible. */
  --pid-map-sea: #08101d;
  --pid-map-land: #141d2d;
  --pid-map-land-home: #1b2740;
  --pid-map-coast: #34476a;

  /* The grouped page is the darkest surface and the cards sit a step above
     it, as on an iPhone in dark mode, so the page and the card swap places
     relative to the light scheme. */
  --pid-ios-grouped: var(--pid-bg);
  --pid-ios-tint: var(--pid-brand);

  --pid-ios-icon-brand: var(--pid-brand-soft);
  --pid-ios-icon-brand-ink: var(--pid-brand-soft-ink);
  --pid-ios-icon-ok: var(--pid-ok-soft);
  --pid-ios-icon-ok-ink: var(--pid-ok-soft-ink);
  --pid-ios-icon-warn: var(--pid-warn-soft);
  --pid-ios-icon-warn-ink: var(--pid-warn-soft-ink);
  --pid-ios-icon-bad: var(--pid-bad-soft);
  --pid-ios-icon-bad-ink: var(--pid-bad-soft-ink);
  --pid-ios-icon-neutral: var(--pid-surface-muted);
  --pid-ios-icon-neutral-ink: var(--pid-ink-soft);

  --pid-field-label-secondary: var(--pid-ink-soft);
  --pid-field-tint: #8fcdf6;
  --pid-field-grouped: #000000;
  --pid-field-fill: #26344c;
  --pid-field-tinted: #12304f;
}