/* MIGRAGENT design tokens.
 *
 * Two faces on purpose. Light is bright and youthful, because starting an
 * application is a hopeful act. Dark is elite and mature, because the same
 * document has to survive being read across a desk by a bank officer.
 *
 * Every ratio in a comment below came from `python tools/contrast.py`. If you
 * change a colour, run it again and change the comment, or the comment is a
 * lie. Nothing here is graded by eye.
 */

:root {
  /* LIGHT, bright and youthful */
  --paper: #FAFBFD;         /* cool paper. Trust reads cooler than warm. */
  --paper-raised: #FFFFFF;
  --ink: #0F172A;           /* 17.24 on paper */
  --ink-soft: #55627A;      /*  5.94 on paper */
  --rule: #DEE4EE;
  --primary: #16467D;       /*  9.19 on paper. Institutional blue. */
  --primary-hot: #1E5FA8;   /*  6.23 on paper, and now safe for text too */
  --accent: #FFC53D;        /*  1.52 on paper, DECORATION ONLY, never text */
  --link: #1B5FCC;          /*  5.70 on paper, the colour of a real source */
  --warn: #A63A22;          /*  6.24 on paper, marks an open question */

  --shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 8px 24px rgba(15, 23, 42, .06);
  --ring: 0 0 0 3px rgba(22, 70, 125, .26);

  /* Type. Fraunces carries both moods from one family by moving its optical
   * size and its wonk axis, which is why it beat a two-serif pairing. */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", monospace;

  /* Youthful: rounder, looser, a touch more air. */
  --radius: 12px;
  --radius-sm: 8px;
  --display-wght: 600;
  --display-soft: 60;   /* Fraunces SOFT axis, high is friendlier */
  --display-wonk: 1;
  --display-tracking: -0.011em;
  --body-tracking: 0em;
  --density: 1;

  --step: 4px;
  --motion-fast: 120ms;
  --motion: 200ms;
  --ease: cubic-bezier(.2, .7, .3, 1);

  color-scheme: light;
}

:root[data-theme="dark"],
html.dark {
  /* DARK, elite and mature */
  --paper: #080B12;
  --paper-raised: #111823;
  --ink: #E8ECF2;           /* 16.60 on paper */
  --ink-soft: #97A3B6;      /*  7.71 on paper */
  --rule: #1E2836;
  --primary: #7FB0F2;       /*  8.81 on paper */
  --primary-hot: #A6C9F8;   /* 11.56 on paper */
  --accent: #C9A227;        /*  8.14 on paper. Aged gold against navy.
                             * Navy and gold is the oldest trustworthy
                             * pairing there is, which is the point. */
  --link: #8FB3F5;          /*  9.31 on paper */
  --warn: #E0765A;          /*  6.48 on paper */

  --shadow: 0 1px 2px rgba(0, 0, 0, .6), 0 12px 40px rgba(0, 0, 0, .45);
  --ring: 0 0 0 3px rgba(127, 176, 242, .24);

  /* Mature: tighter, flatter, less radius, thinner rules. Same family, and it
   * is the geometry rather than the palette that carries most of the shift. */
  --radius: 6px;
  --radius-sm: 4px;
  --display-wght: 400;
  --display-soft: 0;
  --display-wonk: 0;
  --display-tracking: -0.021em;
  --body-tracking: 0.004em;
  --density: .92;

  color-scheme: dark;
}

/* Someone who has never touched the toggle still gets the right face. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #080B12;
    --paper-raised: #111823;
    --ink: #E8ECF2;
    --ink-soft: #97A3B6;
    --rule: #1E2836;
    --primary: #7FB0F2;
    --primary-hot: #A6C9F8;
    --accent: #C9A227;
    --link: #8FB3F5;
    --warn: #E0765A;
    --shadow: 0 1px 2px rgba(0, 0, 0, .6), 0 12px 40px rgba(0, 0, 0, .45);
    --ring: 0 0 0 3px rgba(127, 176, 242, .24);
    --radius: 6px;
    --radius-sm: 4px;
    --display-wght: 400;
    --display-soft: 0;
    --display-wonk: 0;
    --display-tracking: -0.021em;
    --body-tracking: 0.004em;
    --density: .92;
    color-scheme: dark;
  }
}

/* Numbers in this product are money and dates. They line up in a column or
 * they are harder to read than they need to be. */
.tabular,
.cost,
.duration,
.read-on {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* A source link never hides. It is the product. */
.source {
  font-family: var(--font-mono);
  font-size: .8125rem;
  color: var(--link);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.read-on {
  font-family: var(--font-mono);
  font-size: .75rem;
  color: var(--ink-soft);
}

/* Anything the agent could not source is marked, not quietly dropped. */
.open-question {
  border-left: 2px solid var(--warn);
  padding-left: calc(var(--step) * 3);
  color: var(--ink);
}

h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: var(--display-wght);
  letter-spacing: var(--display-tracking);
  font-variation-settings: "SOFT" var(--display-soft), "WONK" var(--display-wonk);
}

body {
  font-family: var(--font-body);
  letter-spacing: var(--body-tracking);
  background: var(--paper);
  color: var(--ink);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}