/* Design tokens: every colour, font, size and space the app uses lives in this one file.
   To change the look, change a value here. Nothing else in the app holds a colour or a size (a test checks that app.css and the
   scripts contain no hex colour and no rgb()).
   Sizes are in rem, so the phone's own text-size setting (which changes the root size) scales everything together.
   The app is built for phone widths, 360 to 430 px. On a wider screen it stays at phone width, centred.
   Two themes. The light values are in :root. The dark values appear twice, once for "follows the phone" (prefers-color-scheme) and once
   for a forced dark (data-theme="dark" on <html>); a test checks that the two copies are the same. */

@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("/fonts/bricolage-grotesque-latin-wght-normal.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/dm-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/dm-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/dm-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("/fonts/newsreader-latin-wght-normal.woff2") format("woff2"); }

:root {
  /* Surfaces and ink */
  --paper: #F7F6F2;
  --ground: var(--paper);
  --card: #FFFFFF;
  --ink: #15131F;
  --ink2: #3A3650;
  --ink3: #6F6B7B;
  --rule: #E3E1DA;
  --divider: var(--rule);
  --action: #4B3BFF;
  --accent: var(--action);
  --done: #8EF0C0;
  --photo: #B9B3A6;
  --soft: #ECEAE4;       /* the track of a switch, a quiet chip */
  --faint: #C9C4B8;      /* an outline that only has to be seen, such as an empty tick */
  --thumb: #FFFFFF;      /* the knob of a switch */
  --on-ink: var(--paper);        /* text on an ink fill */
  --on-ink-muted: #CFCBDC;       /* quieter text on an ink fill */
  --on-action: #FFFFFF;          /* text on the action colour */
  --on-done: #15131F;            /* text on the done colour */
  --scrim: rgb(21 19 31 / 0.45);
  --shadow-pop: 0 8px 24px rgb(21 19 31 / 0.18);

  /* Areas: a text colour for the area, a tint and a deeper text colour for a tinted band */
  --health-fg: #0B5A3A;   --health-bg: #D7F5E6;   --health-deep: #0B3D29;
  --corporate-fg: #2433A8; --corporate-bg: #DDE3FF; --corporate-deep: #1B277F;
  --courts-fg: #96204A;   --courts-bg: #FFDCE6;   --courts-deep: #7A1A3C;
  --data-fg: #5A2AA8;     --data-bg: #EBDDFE;     --data-deep: #3E1A7A;
  --competition-fg: #8A3A0B; --competition-bg: #FFE3CF; --competition-deep: #5E2606;
  --news-bg: #E9E7F1; --news-fg: #3A3650;
  /* Status: drafts and deadlines. Checked uses the health tint. */
  --draft-bg: #FFE3CF; --draft-fg: #8A3A0B; --draft-strip: #FFF3EA;
  --outlets-bg: #E6E3FF; --outlets-fg: #2E22B8;
  --warn: #8A3A0B;

  /* Type: headlines and reading text in the serif; the masthead, labels, meta, buttons and controls in the sans faces */
  --display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --ui: "DM Sans", "Segoe UI", system-ui, "Noto Sans", "Noto Sans Devanagari", sans-serif;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --fs-detail: 0.75rem;     /* 12px, the smallest text, and labels */
  --fs-meta: 0.8125rem;     /* 13px */
  --fs-small: 0.875rem;     /* 14px */
  --fs-body: 0.9375rem;     /* 15px */
  --fs-read: 1.0625rem;     /* 17px, plain text in the interface */
  --fs-list: 1.03125rem;    /* 16.5px, a headline in a list */
  --fs-card: 1.125rem;      /* 18px, card heading */
  --fs-reading: 1.125rem;   /* 18px, reading text, line height 1.55 */
  --fs-section: 1.375rem;   /* 22px, a section lead */
  --fs-lead: 1.75rem;       /* 28px, the lead headline */
  --fs-title: 1.875rem;     /* 30px, the masthead and screen titles */
  --fs-reading-title: 1.6875rem; /* 27px, headline on the reading page */

  /* Shape */
  --r-hero: 1.25rem;
  --r-card: 0.875rem;
  --r-tile: 0.875rem;
  --r-tag: 0.75rem;
  --r-photo: 0.375rem; /* the small radius of half and thumbnail pictures */
  --r-pill: 62.5rem;   /* fully round */
  --shadow-card: none;

  /* Space */
  --gutter: 1.25rem;
  --target: 2.75rem;     /* 44px minimum touch target */
  --tab-h: 4.625rem;     /* 74px tab bar, before the safe area */
  --abar-h: 4.875rem;    /* 78px action bar, before the safe area */
  --column: 430px;       /* widest the app ever gets. Layout width, so it does not scale with text size. */

  color-scheme: light;
}

/* Dark, when the phone is dark and the reader has not chosen light */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #121116; --card: #1B1A21; --ink: #F1EFF6; --ink2: #CFCBDC; --ink3: #9D99AC; --rule: #2A2832; --action: #8F84FF; --photo: #3A3744;
    --soft: #26242D; --faint: #4A4756; --thumb: #F1EFF6; --on-ink-muted: #55526A; --on-action: #121116; --scrim: rgb(0 0 0 / 0.6); --shadow-pop: 0 8px 24px rgb(0 0 0 / 0.5);
    --health-fg: #7ED9B0;   --health-bg: #13291F;   --health-deep: #BFEBD6;
    --corporate-fg: #9DA8FF; --corporate-bg: #1A1F3D; --corporate-deep: #D6DBFF;
    --courts-fg: #FF9DBB;   --courts-bg: #32141F;   --courts-deep: #FFD3E0;
    --data-fg: #C9A8FF;     --data-bg: #281B3E;     --data-deep: #E5D6FF;
    --competition-fg: #FFB07A; --competition-bg: #32200F; --competition-deep: #FFD9BF;
    --news-bg: #26242D; --news-fg: #CFCBDC;
    --draft-bg: #3A2410; --draft-fg: #FFB07A; --draft-strip: #2A1C10;
    --outlets-bg: #25214F; --outlets-fg: #BDB6FF;
    --warn: #FFB07A;
    color-scheme: dark;
  }
}

/* Dark, when the reader has chosen it. The same values as above. */
:root[data-theme="dark"] {
  --paper: #121116; --card: #1B1A21; --ink: #F1EFF6; --ink2: #CFCBDC; --ink3: #9D99AC; --rule: #2A2832; --action: #8F84FF; --photo: #3A3744;
  --soft: #26242D; --faint: #4A4756; --thumb: #F1EFF6; --on-ink-muted: #55526A; --on-action: #121116; --scrim: rgb(0 0 0 / 0.6); --shadow-pop: 0 8px 24px rgb(0 0 0 / 0.5);
  --health-fg: #7ED9B0;   --health-bg: #13291F;   --health-deep: #BFEBD6;
  --corporate-fg: #9DA8FF; --corporate-bg: #1A1F3D; --corporate-deep: #D6DBFF;
  --courts-fg: #FF9DBB;   --courts-bg: #32141F;   --courts-deep: #FFD3E0;
  --data-fg: #C9A8FF;     --data-bg: #281B3E;     --data-deep: #E5D6FF;
  --competition-fg: #FFB07A; --competition-bg: #32200F; --competition-deep: #FFD9BF;
  --news-bg: #26242D; --news-fg: #CFCBDC;
  --draft-bg: #3A2410; --draft-fg: #FFB07A; --draft-strip: #2A1C10;
  --outlets-bg: #25214F; --outlets-fg: #BDB6FF;
  --warn: #FFB07A;
  color-scheme: dark;
}

/* Text size: the app follows the phone's own text-size setting. The root size is left at 100%, which Android applies from the
   system setting. On iPhone the same is done through the system's body text size. There is no text-size control in the app. */
html { font-size: 100%; }
@supports (font: -apple-system-body) {
  html { font: -apple-system-body; }
}