/* Paguei design tokens.
   Three layers: primitives (raw values, never used by components), semantic roles (what components use), and
   scales (type, space, radius, motion). The materials are the ones people already trust when they pay a bill in
   Brazil: security paper, navy form ink, a ballpoint for what you do, the violet ink of the bank's mechanical
   authentication, and the green rubber stamp. Documented in design-system.html. */

:root {
  /* primitives */
  --p-paper-50: #F2F4EE;   /* security paper, a faint green */
  --p-paper-0: #FFFFFF;
  --p-navy-900: #14203A;   /* form ink */
  --p-navy-600: #4A5670;
  --p-navy-950: #0F1830;
  --p-line-200: #D2D9D1;
  --p-guilloche: #C9D3C7;
  --p-blue-600: #1F4FD1;   /* ballpoint */
  --p-blue-100: #E4EBFB;
  --p-violet-700: #5A3D9E; /* mechanical authentication ink */
  --p-violet-100: #ECE7F7;
  --p-green-700: #0E7A55;  /* rubber stamp */
  --p-green-100: #E1F2EA;
  --p-amber-700: #A86400;
  --p-red-700: #B8322B;
  --p-red-100: #FAE8E6;

  /* semantic roles */
  --paper: var(--p-paper-50);
  --sheet: var(--p-paper-0);
  --ink: var(--p-navy-900);
  --ink-soft: var(--p-navy-600);
  --rule: var(--p-line-200);
  --guilloche: var(--p-guilloche);
  --pen: var(--p-blue-600);        /* actions, links, focus */
  --pen-soft: var(--p-blue-100);
  --on-pen: #FFFFFF;
  --auth: var(--p-violet-700);     /* machine-printed proof */
  --auth-soft: var(--p-violet-100);
  --ok: var(--p-green-700);
  --ok-soft: var(--p-green-100);
  --warn: var(--p-amber-700);
  --danger: var(--p-red-700);
  --danger-soft: var(--p-red-100);
  --scanner: #E0362C;              /* the red line of a barcode reader */
  --bubble-in: #FFFFFF;
  --bubble-out: var(--p-blue-100);
  --band: var(--p-navy-900);
  --on-band: #F1F4F8;
  --on-band-soft: #AEB8CA;
  --band-link: #9DB7FF;

  /* type: one grotesk for reading, one dot-matrix face only for what a machine prints */
  --font: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --dot: "Doto", ui-monospace, monospace;
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  /* scale 1.25 (major third) from 16px; the display size is fluid */
  --s0: .75rem; --s1: .875rem; --s2: 1rem; --s3: 1.25rem; --s4: 1.5625rem; --s5: clamp(1.95rem, 4vw, 2.6rem);
  --s6: clamp(2.6rem, 6.6vw, 5.1rem);
  --lh-tight: 1.02; --lh-head: 1.1; --lh-body: 1.55;

  /* space: 4px base */
  --sp1: 4px; --sp2: 8px; --sp3: 12px; --sp4: 16px; --sp5: 24px; --sp6: 32px; --sp7: 48px; --sp8: 72px;

  /* radius follows what the thing is: printed forms are square, controls you press are round */
  --r-form: 2px; --r-chip: 6px; --r-bubble: 14px; --r-control: 999px;
  --line-form: 1.5px solid var(--ink);

  /* motion: one orchestrated sequence (the conference), the rest answers the person */
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-stamp: cubic-bezier(.2, 1.6, .4, 1);
  --dur-1: 120ms; --dur-2: 240ms; --dur-3: 520ms;
  --stagger: 70ms;
  --print-char: 16ms;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #111A2C; --sheet: #172137; --ink: #E9EDF3; --ink-soft: #A7B1C4; --rule: #2B3650; --guilloche: #1F2A42;
    --pen: #86A6FF; --pen-soft: #22305A; --on-pen: #0E1526; --auth: #B9A2F2; --auth-soft: #2A2348;
    --ok: #45C795; --ok-soft: #163A30; --warn: #E6A83F; --danger: #F07468; --danger-soft: #43211F; --scanner: #FF6B5E;
    --bubble-in: #1D2840; --bubble-out: #22305A; --band: #1C2843; --on-band: #EEF2F8; --on-band-soft: #B4BED0;
    --band-link: #A9C0FF; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #111A2C; --sheet: #172137; --ink: #E9EDF3; --ink-soft: #A7B1C4; --rule: #2B3650; --guilloche: #1F2A42;
  --pen: #86A6FF; --pen-soft: #22305A; --on-pen: #0E1526; --auth: #B9A2F2; --auth-soft: #2A2348;
  --ok: #45C795; --ok-soft: #163A30; --warn: #E6A83F; --danger: #F07468; --danger-soft: #43211F; --scanner: #FF6B5E;
  --bubble-in: #1D2840; --bubble-out: #22305A; --band: #1C2843; --on-band: #EEF2F8; --on-band-soft: #B4BED0;
  --band-link: #A9C0FF; color-scheme: dark;
}

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