/* Design tokens: fonts, colors and status tones. Every color in the app comes from here. */

@font-face { font-family: "Bricolage Grotesque"; font-weight: 600; font-display: swap; src: url("../assets/fonts/bricolage-grotesque-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Bricolage Grotesque"; font-weight: 800; font-display: swap; src: url("../assets/fonts/bricolage-grotesque-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-weight: 400; font-display: swap; src: url("../assets/fonts/instrument-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-weight: 500; font-display: swap; src: url("../assets/fonts/instrument-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-weight: 600; font-display: swap; src: url("../assets/fonts/instrument-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-weight: 700; font-display: swap; src: url("../assets/fonts/instrument-sans-latin-700-normal.woff2") format("woff2"); }

:root {
  --display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --body: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Light theme. All text pairs below meet WCAG AA contrast (4.5:1). */
  --bg: #f6f5fb; --surface: #ffffff; --surface-2: #f0eef8; --ink: #1d1b33; --muted: #5f5c78; --line: #e3e0ef; --track: #8f8bab;
  --primary: #4f3fd8; --primary-ink: #ffffff; --primary-soft: #e9e6fd;
  --applied: #2a5fd0; --applied-soft: #e4ecfc;
  --email: #07726a; --email-soft: #d9f3ef;
  --interview: #7d33c4; --interview-soft: #f1e6fc;
  --offer: #15733d; --offer-soft: #dcf2e5;
  --rejected: #bf2f47; --rejected-soft: #fbe3e6;
  --warn: #8a5300; --warn-soft: #ffefd2;
  --signal: #ffc94d; /* the logo's dot: the reply that comes back. Decoration only, never text. */
  --wordmark-dot: var(--primary);
  --av-bg: 92%; --av-fg: 32%;
  --shadow: 0 1px 2px rgb(29 27 51 / .05), 0 6px 18px rgb(29 27 51 / .06);
  --scrim: rgb(16 14 32 / .45);
  --radius: 16px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #13121b; --surface: #1c1b28; --surface-2: #252336; --ink: #edecf6; --muted: #a3a0bb; --line: #302e45; --track: #5d5a7a;
    --primary: #958cff; --primary-ink: #13121b; --primary-soft: #2a2652;
    --applied: #82a6ff; --applied-soft: #1d2848;
    --email: #43d3c4; --email-soft: #123230;
    --interview: #c590ff; --interview-soft: #2e2047;
    --offer: #5fd894; --offer-soft: #153222;
    --rejected: #ff8796; --rejected-soft: #3c1c24;
    --warn: #ffbf58; --warn-soft: #382b10;
    --av-bg: 26%; --av-fg: 78%; --shadow: none; --scrim: rgb(0 0 0 / .6);
    --wordmark-dot: var(--signal);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #13121b; --surface: #1c1b28; --surface-2: #252336; --ink: #edecf6; --muted: #a3a0bb; --line: #302e45; --track: #5d5a7a;
  --primary: #958cff; --primary-ink: #13121b; --primary-soft: #2a2652;
  --applied: #82a6ff; --applied-soft: #1d2848;
  --email: #43d3c4; --email-soft: #123230;
  --interview: #c590ff; --interview-soft: #2e2047;
  --offer: #5fd894; --offer-soft: #153222;
  --rejected: #ff8796; --rejected-soft: #3c1c24;
  --warn: #ffbf58; --warn-soft: #382b10;
  --av-bg: 26%; --av-fg: 78%; --shadow: none; --scrim: rgb(0 0 0 / .6);
  --wordmark-dot: var(--signal);
  color-scheme: dark;
}

/* Tones: add class="tone-x" and use var(--c) / var(--cs) inside a component. */
.tone-primary   { --c: var(--primary);   --cs: var(--primary-soft); }
.tone-applied   { --c: var(--applied);   --cs: var(--applied-soft); }
.tone-email     { --c: var(--email);     --cs: var(--email-soft); }
.tone-interview { --c: var(--interview); --cs: var(--interview-soft); }
.tone-offer     { --c: var(--offer);     --cs: var(--offer-soft); }
.tone-rejected  { --c: var(--rejected);  --cs: var(--rejected-soft); }
.tone-warn      { --c: var(--warn);      --cs: var(--warn-soft); }
.tone-muted     { --c: var(--muted);     --cs: var(--surface-2); }

/* Arabic: our Latin fonts have no Arabic letters, so use the system's Arabic font. */
:lang(ar) { --display: "Segoe UI", "Noto Sans Arabic", "SF Arabic", Tahoma, system-ui, sans-serif; --body: "Segoe UI", "Noto Sans Arabic", "SF Arabic", Tahoma, system-ui, sans-serif; }