/* FileClear's design tokens, in one file, read by the marketing pages and by
   the application so a colour changes once.

   Ink and stamp: the look of official paperwork done properly. A government
   form's navy for the ink and for the full-width sections, white paper in
   light mode, and the red already in the mark used the way a rubber stamp is,
   sparingly and where something is decided: the button that starts, a due
   date, the word FILED. Type is the system's own, the same as
   antipodetech.com: a serif and IBM Plex were tried in October 2026 and taken
   out because they read as heavy, so nothing is loaded.

   It replaced a palette measured off QuickBooks, black and red, in October
   2026, because it looked like QuickBooks.

   Red does double duty here, as brand and as overdue, which is normally a
   mistake. It works because the two never share a surface: the brand red is on
   white as a button or a stamp, and the overdue red is a tinted row with its
   own label. Where a status genuinely needs to be distinguished, amber carries
   it. Every pairing below was measured; the lowest is 5.3:1. */


:root {
  color-scheme: light dark;

  --bg:       #ffffff;
  --band:     #f4f6f9;  /* the cool grey band between white sections */
  --ice:      #e9eef5;  /* the second, slightly deeper tint */
  --surface:  #ffffff;
  --sunk:     #eceff4;

  /* Black is a surface, not just ink. Whole sections sit on it. */
  --dark:     #13233f;
  --dark-2:   #1c2f52;
  --on-dark:  #ffffff;
  --on-dark-2:#b9c4d8;

  --ink:      #0f1a2e;  /* 19.5:1 on white */
  --ink-2:    #33415a;  /* 11.2:1 */
  --muted:    #56627a;  /*  5.9:1 */

  --line:     #dde3ec;
  --line-2:   #c3ccda;
  /* Body links are ink with an underline. Red is for actions, and red links
     everywhere make an application look like a wall of errors. */
  --link:     #13233f;

  --brand:        #c8102e;  /* white on it, 5.9:1 */
  --brand-ink:    #ffffff;
  --brand-tint:   #fceaec;
  --brand-strong: #a60d26;

  --primary:      #13233f;
  --primary-ink:  #ffffff;

  --danger:       #c8102e;
  --danger-tint:  #fceaec;
  --warn:         #8a5200;
  --warn-tint:    #fbf0dc;

  --radius:    12px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --radius-btn: 6px;   /* squarer than a pill, the way the reference does it */
  --shadow:    0 1px 2px rgba(11,13,15,.04), 0 8px 22px rgba(11,13,15,.06);
  --shadow-lg: 0 2px 6px rgba(11,13,15,.05), 0 26px 64px rgba(11,13,15,.14);

  /* Three roles, all the system's own faces: nothing to download, and the
     type people already read all day. Dates and figures keep a monospace so
     a column of them lines up. */
  --font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* The navy of the ink, deepened into a ground, so dark mode is the other
       half of the same pair rather than a third scheme. Borders are
       translucent white, which is correct against every surface rather than
       against exactly one. */
    --bg:       #0b1324;
    --band:     #0e172b;
    --ice:      #121d34;
    --surface:  #111b30;
    --sunk:     #0c1527;

    --dark:     #142240;
    --dark-2:   #1b2b4b;
    --on-dark:  #f3f5f9;
    --on-dark-2:#a9b4c8;

    --ink:      #f3f5f9;
    --ink-2:    #c9d1de;
    --muted:    #9ba6ba;  /* 8.2:1 on the ground */

    --line:     rgba(255, 255, 255, .09);
    --line-2:   rgba(255, 255, 255, .17);
    --link:     #f3f5f9;

    /* Lifted off the ground, because #c8102e on near black is 3.4:1 and text
       needs 4.5. Same hue, different lightness. */
    --brand:        #ff5f6d;
    --brand-ink:    #2b0509;
    --brand-tint:   rgba(255, 95, 109, .14);
    --brand-strong: #ff8a94;

    --primary:      #f4f1e8;
    --primary-ink:  #13233f;

    --danger:       #ff5f6d;
    --danger-tint:  rgba(255, 95, 109, .14);
    --warn:         #f0b45f;
    --warn-tint:    rgba(240, 180, 95, .12);

    --shadow:    0 0 0 1px rgba(255, 255, 255, .04);
    --shadow-lg: 0 0 0 1px rgba(255, 255, 255, .06), 0 24px 60px rgba(0, 0, 0, .6);
  }
}