/*
 * Plattformens designtokens och typsnitt. Ett ställe.
 *
 * I Valivos styles.css definieras --ink, --green, --radius och --shell om sig
 * fem gånger i samma fil med olika värden beroende på var i filen man läser.
 * Det är därför en designändring för ett verktyg kunde slå igenom på ett annat.
 * Här finns varje token exakt en gång, och verktygen får inte definiera om dem
 * — de får bara använda dem eller lägga till egna under sin egen namnrymd.
 *
 * Identiteten är AI Coworkers egen, inte Valivos. Verktygstokens (--ac-*)
 * pekar på plattformens yttokens i stället för att bära egna värden, så en
 * ändring av färgläget slår igenom i verktygen också.
 */


/*
 * Snitten ligger hos oss. Google Fonts hade lagt en tredjepart mellan
 * besökaren och sidan, skickat besökarens IP till Google och krävt ett hål i
 * CSP:n. Fyra filer, 131 kB, latinskt utsnitt — å, ä och ö ingår.
 */
@font-face {
  font-family: Fraunces;
  src: url("/assets/fonts/fraunces.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2122, U+2212;
}
@font-face {
  font-family: Archivo;
  src: url("/assets/fonts/archivo.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2122, U+2212;
}
@font-face {
  font-family: "Plex Mono";
  src: url("/assets/fonts/plexmono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122, U+2212;
}
@font-face {
  font-family: "Plex Mono";
  src: url("/assets/fonts/plexmono-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122, U+2212;
}

/*
 * Plattformens yttokens. Ljust är utgångsläget. Varje färg finns i alla tre
 * tillstånd: valt mörkt, valt ljust, och inget val alls — då avgör systemet.
 * En färg som bara definieras inne i en media-fråga gäller aldrig i det
 * omärkta tillståndet, och då står ena lägets text på andra lägets botten.
 *
 * Kontrastkvoterna är mätta mot den mark texten faktiskt ligger på. Minsta
 * text: 4,86 mot jorden i ljust läge, 5,39 i mörkt. Golvet är 4,5.
 * Grenfärgerna ligger mellan 5,15 och 11,49.
 */
:root {
  --bg: #F7F8F6;
  --deep: #EBEEE9;
  --line: #9AA29C;
  --ink: #14171A;
  --soft: #4E555A;
  --faint: #5F686D;
  --edge: #D6DAD5;
  --card: #FFFFFF;
  --shadow: 0 22px 60px -28px #0F172A55;
  --spark: #FFFFFF;
  --glow: 2.2;
  --lit: 0;

  /* Grenfärgerna. En per löfte, i katalogens ordning. Fler löften än färger
     ger två grenar i samma färg — core/config/catalogue.js fäller bygget då. */
  --c1: #A34800;
  --c2: #BE1350;
  --c3: #5B21C4;
  --c4: #0A657B;
  --c5: #2E7D32;
  --c6: #8A5A00;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #04070C; --deep: #080C14; --line: #2E3949; --ink: #F5F2EB; --soft: #ABA396;
    --faint: #7E8794; --edge: #1B2230; --card: #0A0F18;
    --shadow: 0 24px 70px -26px #000C;
    --spark: #FFF8E8; --glow: 4.4; --lit: 1;
    --c1: #FFA425; --c2: #FF4A7C; --c3: #B061FF; --c4: #1FD6F2; --c5: #6EE07A; --c6: #FFD166;
  }
}

:root[data-theme="dark"] {
  --bg: #04070C; --deep: #080C14; --line: #2E3949; --ink: #F5F2EB; --soft: #ABA396;
  --faint: #7E8794; --edge: #1B2230; --card: #0A0F18;
  --shadow: 0 24px 70px -26px #000C;
  --spark: #FFF8E8; --glow: 4.4; --lit: 1;
  --c1: #FFA425; --c2: #FF4A7C; --c3: #B061FF; --c4: #1FD6F2; --c5: #6EE07A; --c6: #FFD166;
}

:root {
  /* Färg — ytor */
  --ac-surface: var(--bg);
  --ac-surface-sunken: var(--deep);
  --ac-surface-raised: var(--card);
  --ac-line: var(--edge);

  /* Färg — text */
  --ac-ink: var(--ink);
  --ac-ink-muted: var(--soft);

  /* Färg — varumärke */
  --ac-brand: var(--c1);
  --ac-brand-dark: var(--c2);
  --ac-brand-soft: #dff2e9;
  --ac-accent: #bfe66f;

  /* Färg — status */
  --ac-warning: #9b5c12;
  --ac-danger: #a73838;
  --ac-success: #1d6b4f;

  /* Typografi */
  --ac-font-sans: Archivo, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ac-font-display: Fraunces, Georgia, serif;
  --ac-text-xs: 0.8125rem;
  --ac-text-sm: 0.9375rem;
  --ac-text-base: 1rem;
  --ac-text-lg: 1.25rem;
  --ac-text-xl: 1.75rem;
  --ac-text-2xl: 2.5rem;
  --ac-text-3xl: 3.5rem;
  --ac-leading-tight: 1.15;
  --ac-leading-normal: 1.6;

  /* Mellanrum */
  --ac-space-1: 4px;
  --ac-space-2: 8px;
  --ac-space-3: 12px;
  --ac-space-4: 16px;
  --ac-space-5: 24px;
  --ac-space-6: 32px;
  --ac-space-7: 48px;
  --ac-space-8: 72px;

  /* Form */
  --ac-radius-sm: 10px;
  --ac-radius: 22px;
  --ac-radius-lg: 28px;
  --ac-shadow: var(--shadow);
  --ac-shadow-sm: 0 4px 14px rgba(21, 63, 48, 0.07);

  /* Layout */
  --ac-shell: min(1180px, calc(100% - 40px));
  --ac-shell-narrow: min(760px, calc(100% - 40px));
}

@media (max-width: 640px) {
  :root {
    --ac-shell: min(100% - 28px, 1180px);
    --ac-text-3xl: 2.25rem;
    --ac-text-2xl: 1.75rem;
  }
}

/*
 * Verktygsnamnrymd.
 *
 * Varje verktygs CSS får bara innehålla selektorer under sin egen
 * [data-product]-attributväljare. Regeln kontrolleras av tests/boundaries.test.js
 * så den inte kan glida isär över tid.
 */
[data-product] {
  color: var(--ac-ink);
  font-family: var(--ac-font-sans);
  line-height: var(--ac-leading-normal);
}