/* Internship Agent design tokens — one file for the landing page, the privacy page,
   sign-in and the student app.

   The identity is a paper form being filled in: cool form-grey paper, white sheets,
   navy ink. Autofill yellow is reserved for one meaning — "filled in by the agent /
   check this" — the way Chrome tints a field it autofilled. Status colours always come
   with an icon and a word, never colour alone. Every text pair below is at least 4.5:1. */
@import url("../fonts/fonts.css");

:root{
  color-scheme: light;
  --paper:#F2F4F7; --sheet:#FFFFFF; --sheet-2:#F7F8FA;
  --ink:#1B2230; --ink-2:#4A5362; --ink-3:#646E7B;
  --rule:#D6DBE3; --rule-2:#E6E9EE;

  --autofill:#FFF3BF; --autofill-edge:#E3CE6F; --autofill-ink:#6B5500;
  --done:#1E7B53; --done-tint:#E4F2EA;
  --yours:#2F5FD0; --yours-tint:#E6EDFB;          /* your turn: an action is yours */
  --problem:#B42318; --problem-tint:#FCEBEA;
  --quiet:#646E7B; --quiet-tint:#EEF0F3;
  --focus:#2F5FD0;
  --on-accent:#FFFFFF;

  --font-ui:"Familjen Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-form:"Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --r-sheet:10px; --r-field:6px; --r-pill:999px;
  --shadow:0 1px 0 var(--rule), 0 18px 40px -28px rgba(27,34,48,.45);
  --dur-1:120ms; --dur-2:240ms;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --paper:#11151D; --sheet:#181D27; --sheet-2:#1C2230;
    --ink:#E6E9EF; --ink-2:#B1B8C4; --ink-3:#8E97A5;
    --rule:#2A313D; --rule-2:#232935;
    --autofill:#3B3413; --autofill-edge:#77682A; --autofill-ink:#F3DE8A;
    --done:#4FC08D; --done-tint:#173326;
    --yours:#86A6F5; --yours-tint:#1C2742;
    --problem:#F2877E; --problem-tint:#3A1C1C;
    --quiet:#8E97A5; --quiet-tint:#20262F;
    --focus:#86A6F5; --on-accent:#11151D;
    --shadow:0 1px 0 var(--rule), 0 18px 40px -28px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --paper:#11151D; --sheet:#181D27; --sheet-2:#1C2230;
  --ink:#E6E9EF; --ink-2:#B1B8C4; --ink-3:#8E97A5;
  --rule:#2A313D; --rule-2:#232935;
  --autofill:#3B3413; --autofill-edge:#77682A; --autofill-ink:#F3DE8A;
  --done:#4FC08D; --done-tint:#173326;
  --yours:#86A6F5; --yours-tint:#1C2742;
  --problem:#F2877E; --problem-tint:#3A1C1C;
  --quiet:#8E97A5; --quiet-tint:#20262F;
  --focus:#86A6F5; --on-accent:#11151D;
  --shadow:0 1px 0 var(--rule), 0 18px 40px -28px rgba(0,0,0,.8);
}

@media (prefers-reduced-motion: reduce){
  :root{ --dur-1:0ms; --dur-2:0ms; }
}