/* Ametica AI — vizualny system podla getdesign.md → "Claude" (Anthropic).
   Kremovy canvas, serifovy display s negativnym trackingom, koralovy akcent,
   tmave code okna. Farby a skala su prevzate priamo z DESIGN.md tokenov. */

/* Fonty su self-hostovane a orezane na latin + latin-ext (~112 kB spolu),
   ziadny request na tretiu stranu. Zdroj: Google Fonts (OFL). */
@font-face {
  font-family: "Inter";
  src: url(/ametica-ai/fonts/inter.woff2) format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url(/ametica-ai/fonts/source-serif.woff2) format("woff2");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url(/ametica-ai/fonts/jetbrains-mono.woff2) format("woff2");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* canvas & surfaces */
  --canvas: #faf9f5;
  --surface-soft: #f5f0e8;
  --surface-card: #efe9de;
  --surface-strong: #e8e0d2;
  --hairline: #e6dfd8;
  --hairline-soft: #ebe6df;

  /* text */
  --ink: #141413;
  --body: #3d3d3a;
  --muted: #6c6a64;
  --muted-soft: #8e8b82;

  /* brand */
  --primary: #cc785c;
  --primary-active: #a9583e;
  --teal: #5db8a6;
  --amber: #e8a55a;
  --gain: #2f9e63;
  --loss: #c9564f;

  /* dark product surfaces (code okna) */
  --scroll-thumb: rgba(20, 20, 19, .17);
  --scroll-thumb-hi: rgba(20, 20, 19, .32);
  --scroll-thumb-soft: rgba(20, 20, 19, .1);

  --code-chip: rgba(20, 20, 19, .055);
  --code-bg: #181715;
  --code-bar: #252320;
  --code-fg: #faf9f5;
  --code-muted: #a09d96;

  /* sirka bocnych pasov v sirokom layoute */
  --rail: 15.5rem;

  /* shape */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;

  /* type */
  --font-display: "Source Serif 4", "Tiempos Headline", Georgia, "Times New Roman", serif;
  --font-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --canvas: #141413;
    --surface-soft: #1b1a18;
    --surface-card: #211f1c;
    --surface-strong: #292620;
    --hairline: #2e2b27;
    --hairline-soft: #232120;

    --ink: #f5f0e8;
    --body: #ddd8ce;
    --muted: #a09d96;
    --muted-soft: #8a867d;

    --primary: #e09a78;
    --primary-active: #cc785c;
    --gain: #58c98d;
    --loss: #e08279;

    --scroll-thumb: rgba(245, 240, 232, .17);
  --scroll-thumb-hi: rgba(245, 240, 232, .34);
  --scroll-thumb-soft: rgba(245, 240, 232, .11);

  --code-chip: rgba(245, 240, 232, .075);
    --code-bg: #0d0c0b;
    --code-bar: #1a1917;
    --code-fg: #f5f0e8;
    --code-muted: #8e8b82;
  }
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--canvas);
  color: var(--body);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.65;
  font-feature-settings: "kern" 1;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
  -webkit-tap-highlight-color: transparent;
}

img, svg, video { max-width: 100%; height: auto; }
::selection { background: color-mix(in srgb, var(--primary) 26%, transparent); }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 3px; }

/* ---------- scrollbary ----------
   Tenky thumb bez tracku, nech nam pod navigaciou ani v kode nesedi seda
   lista. Kodove bloky maju vlastny (svetly) thumb, su vzdy na tmavom. */
* { scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb); background-clip: padding-box;
  border: 3px solid transparent; border-radius: 999px;
}
@media (hover: hover) {
  ::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hi); background-clip: padding-box; }
}
/* Navigacia sa ma zmestit cela; ked na nizkom okne predsa len nie, drzime
   thumb sotva vidno - dost na to, aby bolo jasne, ze tam nieco je. */
.side { scrollbar-color: var(--scroll-thumb-soft) transparent; }
.side::-webkit-scrollbar { width: 8px; }
.side::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb-soft); background-clip: padding-box;
  border-width: 2px; transition: background .15s ease;
}
@media (hover: hover) {
  .side:hover, .side:focus-within { scrollbar-color: var(--scroll-thumb-hi) transparent; }
  .side:hover::-webkit-scrollbar-thumb, .side:focus-within::-webkit-scrollbar-thumb {
    background: var(--scroll-thumb-hi); background-clip: padding-box;
  }
}

.cmd pre, .term, .term .term-body { scrollbar-color: rgba(245, 240, 232, .2) transparent; }
.cmd pre::-webkit-scrollbar-thumb,
.term::-webkit-scrollbar-thumb,
.term .term-body::-webkit-scrollbar-thumb {
  background: rgba(245, 240, 232, .2); background-clip: padding-box;
}

/* ---------- citaci progress ---------- */
.progress {
  position: fixed; top: 0; left: 0; z-index: 60;
  height: 2px; width: 0;
  background: var(--primary);
  transition: width .08s linear;
}