@font-face {
  font-family: "Archivo";
  src: url("/assets/archivo-latin-wdth-wght-d3a7d5dc.woff2") format("woff2");
  font-weight: 400 900;
  font-stretch: 75% 125%;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/ibm-plex-mono-latin-400-normal-d803141a.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Archivo Fallback";
  src: local("Arial"), local("Helvetica Neue");
  size-adjust: 98.7%;
  ascent-override: 88.9%;
  descent-override: 21.3%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Plex Mono Fallback";
  src: local("Menlo"), local("Courier New");
  size-adjust: 100%;
  ascent-override: 102.5%;
  descent-override: 27.5%;
  line-gap-override: 0%;
}

:root {
    --sans: "Archivo", "Archivo Fallback", system-ui, sans-serif;
  --mono: "IBM Plex Mono", "Plex Mono Fallback", ui-monospace, Menlo, monospace;
    --t-micro: 0.75rem;     --t-meta: 0.8125rem;      --t-small: 0.875rem;     --t-ui: 0.9375rem;        --t-body: 1rem;
  --t-read: 1.0625rem;      --t-lead: 1.3125rem;      --t-h5: 1.25rem;        --t-h4: 1.375rem;        --t-h3: 1.5rem;        --t-h2-small: 1.875rem;  --t-h2: 2.25rem;        --t-h1: 2.25rem;        --t-display: 3.125rem; 
    --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;

    --radius-pill: 999px;     --radius-option: 9px;     --radius-field: 10px;     --radius-box: 12px;       --radius-menu: 14px;      --radius-card: 16px;      --radius-ticket: 18px;    --radius-sheet: 20px;   
    --wrap: 1180px;
  --gutter-x: 16px;
  --target: 44px;
  --bar-h: 62px;          
    --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 250ms;
}

@media (min-width: 760px) {
  :root { --gutter-x: 40px; --t-h1: 3.5rem; --t-display: 5rem; }
}

:root,
[data-theme="light"] {
  color-scheme: light;
  --paper: #eceeef;
  --paper-2: #e2e5e6;        --card: #f7f8f8;           --ink: #0b0d0c;
  --ink-soft: #2e3437;       --ink-2: #5a6063;          --hairline: #cfd4d6;        --field-border: #7a8286;    --visited: #5b3e8f;
  --highlight: #00c27a;      --on-highlight: #0b0d0c;
  --highlight-deep: #00a868;
  --danger: #b3261e;
  --danger-soft: #f9dedc;
  --scrim: rgba(0, 0, 0, 0.45);
  --shadow-panel: 0 18px 40px -20px rgba(0, 0, 0, 0.35);
  --shadow-menu: 0 22px 44px -22px rgba(0, 0, 0, 0.45);
  --shadow-bar: 0 -12px 30px -20px rgba(0, 0, 0, 0.4);
  --set-bg: var(--ink);
  --set-ink: var(--paper);
  --set-border: var(--ink);
  --set-ring: none;
  --stripe: #1d3b4a;       }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #0d0f0f;
    --paper-2: #16191a;
    --card: #1a1e1f;
    --ink: #e9ecec;
    --ink-soft: #c6cdcf;
    --ink-2: #9ba3a6;
    --hairline: #2c3234;
    --field-border: #6b7478;
    --visited: #c7b4ef;
    --danger: #ff8a80;
    --danger-soft: #3b1513;
    --set-bg: transparent;
    --set-ink: var(--ink);
    --set-border: var(--highlight);
    --set-ring: inset 0 0 0 1px var(--highlight);
  }
}

[data-theme="dark"] {
  color-scheme: dark;
  --paper: #0d0f0f;
  --paper-2: #16191a;
  --card: #1a1e1f;
  --ink: #e9ecec;
  --ink-soft: #c6cdcf;
  --ink-2: #9ba3a6;
  --hairline: #2c3234;
  --field-border: #6b7478;
  --visited: #c7b4ef;
  --danger: #ff8a80;
  --danger-soft: #3b1513;
  --set-bg: transparent;
  --set-ink: var(--ink);
  --set-border: var(--highlight);
  --set-ring: inset 0 0 0 1px var(--highlight);
}

[data-theme] { background: var(--paper); color: var(--ink); }

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