/* The tokens and base rules the app owns, carried over unchanged so the site and the product read as
   one thing. Values are copied from v2/web/src/styles/theme.css in the application repository; a
   change there belongs here too. Patterns that only a marketing page needs live in site.css.

   Inter is named but not shipped. Self-host the files rather than calling Google Fonts: a page that
   sells räkenskapsinformation staying in Sweden should not fetch its typeface from a third party. */

:root {
    --linen: #f3f0ea;
    --paper: #fcfbf8;
    --birch: #ebe6dc;
    --sand: #f6f3ed;
    --line: #e5e0d6;
    --line-strong: #d3ccbe;

    --ink: #1f2529;
    --ink-soft: #454d53;
    --quiet: #737a80;

    --bark: #6b4a35;
    --bark-soft: #ece1d7;
    --fjord: #2d5d7b;
    --fjord-soft: #e3ebef;
    --moss: #4b7453;
    --moss-soft: #e5ede3;
    --ochre: #8f7000;
    --ochre-soft: #faf0d2;
    --lingon: #a6423a;
    --lingon-soft: #f6e4df;
    --stone: #858c90;
    --stone-soft: #eceae5;

    --radius: 12px;
    --radius-small: 8px;
    --gap: 1.25rem;
    --shadow: 0 1px 2px rgb(31 37 41 / 4%), 0 4px 16px rgb(31 37 41 / 3%);

    --tone: var(--stone);
    --tone-soft: var(--stone-soft);

    color-scheme: light;
}

[data-tone="ok"] { --tone: var(--moss); --tone-soft: var(--moss-soft); }
[data-tone="info"] { --tone: var(--fjord); --tone-soft: var(--fjord-soft); }
[data-tone="warn"] { --tone: var(--ochre); --tone-soft: var(--ochre-soft); }
[data-tone="danger"] { --tone: var(--lingon); --tone-soft: var(--lingon-soft); }
[data-tone="muted"] { --tone: var(--stone); --tone-soft: var(--stone-soft); }

*, *::before, *::after { box-sizing: border-box; }

[hidden] { display: none !important; }

body {
    margin: 0;
    background: var(--linen);
    color: var(--ink);
    font: 15px/1.5 "Inter", "Segoe UI", system-ui, sans-serif;
    font-feature-settings: "cv11", "ss01";
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.015em; }
p { margin: 0; }

a {
    color: var(--fjord);
    text-decoration: none;

    &:hover { text-decoration: underline; text-underline-offset: 3px; }
}

:focus-visible {
    outline: 2px solid var(--fjord);
    outline-offset: 2px;
    border-radius: 4px;
}

button, .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .5rem 1rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-small);
    background: var(--paper);
    color: var(--ink);
    font: inherit;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: background .15s, border-color .15s;

    &:hover { background: var(--sand); border-color: var(--quiet); text-decoration: none; }

    &.primary {
        background: var(--bark);
        border-color: var(--bark);
        color: #fff;

        &:hover { background: color-mix(in srgb, var(--bark) 85%, black); }
    }

    &.large { padding: .7rem 1.4rem; font-size: 1.05rem; }
}

/* A short statement in the tone's colours. The soft fill is too close to the paper to hold the shape
   on its own, so the border carries the form and the tone carries the colour. */
.notice {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    padding: .85rem 1rem;
    border: 1px solid color-mix(in srgb, var(--tone) 40%, transparent);
    border-radius: var(--radius-small);
    background: var(--tone-soft);
    color: var(--ink-soft);
    font-size: .9rem;

    strong { display: block; color: var(--ink); }
}

.eyebrow {
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--bark);
}

.quiet { color: var(--quiet); }

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}