/* DnesDan design tokens.

   One source for colour, type, space, shape and motion. Every colour is written
   once with light-dark(), so light and dark can no longer drift apart the way two
   copied blocks did. The page follows the reader's system setting unless the
   theme toggle pinned one: theme.js sets data-theme, and color-scheme below is
   what light-dark() reads.

   The semantic names (--bg, --text, --accent, ...) are the public API that every
   stylesheet already uses; the raw palette underneath them is private to this file. */

@font-face {
    font-family: "Bricolage Grotesque";
    font-style: normal;
    font-display: swap;
    font-weight: 200 800;
    src: url("/assets/fonts/bricolage-grotesque-latin.woff2") format("woff2-variations"),
         url("/assets/fonts/bricolage-grotesque-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Czech and Slovak letters (ě š č ř ž ů ľ ĺ ô ...) live in Latin Extended, so this
   file is fetched only by pages that actually contain them. */
@font-face {
    font-family: "Bricolage Grotesque";
    font-style: normal;
    font-display: swap;
    font-weight: 200 800;
    src: url("/assets/fonts/bricolage-grotesque-latin-ext.woff2") format("woff2-variations"),
         url("/assets/fonts/bricolage-grotesque-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    color-scheme: light dark;

    /* Paper and ink: a workbench, warm rather than clinical. The one loud colour is
       the orange of the device frames, so the brand and the screenshots agree. */
    --bg: light-dark(#f3efe6, #13120f);
    --bg-elevated: light-dark(#fbf9f4, #1c1a16);
    --bg-muted: light-dark(#e9e3d6, #26231e);
    --bg-dark: light-dark(#1a1915, #0b0a08);
    --line: light-dark(rgba(26, 25, 21, 0.12), rgba(242, 237, 226, 0.12));
    --line-strong: light-dark(rgba(26, 25, 21, 0.24), rgba(242, 237, 226, 0.24));
    --text: light-dark(#1a1915, #f2ede2);
    /* Both secondary inks clear 4.5:1 on --bg and on --bg-elevated in each theme. */
    --text-muted: light-dark(#4a463d, #bdb6a7);
    --text-soft: light-dark(#625d52, #979084);
    --text-inverse: light-dark(#f7f4ec, #13120f);
    --accent: light-dark(#b8460f, #ff8f52);
    --accent-strong: light-dark(#93370a, #ffb085);
    --accent-soft: light-dark(rgba(232, 98, 34, 0.1), rgba(255, 143, 82, 0.14));
    --accent-border: light-dark(rgba(184, 70, 15, 0.28), rgba(255, 143, 82, 0.34));
    --signal: #f26a21;
    --focus: light-dark(#c4501a, #ff9a60);

    --shadow-sm: 0 1px 2px light-dark(rgba(40, 30, 10, 0.07), rgba(0, 0, 0, 0.45));
    --shadow-md: 0 1px 2px light-dark(rgba(40, 30, 10, 0.06), rgba(0, 0, 0, 0.4)),
                 0 12px 32px light-dark(rgba(40, 30, 10, 0.09), rgba(0, 0, 0, 0.38));
    --shadow-lg: 0 2px 6px light-dark(rgba(40, 30, 10, 0.06), rgba(0, 0, 0, 0.4)),
                 0 30px 70px light-dark(rgba(40, 30, 10, 0.16), rgba(0, 0, 0, 0.55));

    /* Type. Bricolage carries every heading; its optical-size axis tightens the
       letters as they grow, so display sizes need no hand-tuned tracking. Body
       copy stays in the platform face the apps themselves are drawn in. */
    --font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
    --font-sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    --font-serif: var(--font-display);

    /* A fluid modular scale, 320px to 1440px viewports. */
    --step--1: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
    --step-0: clamp(1rem, 0.97rem + 0.13vw, 1.0625rem);
    --step-1: clamp(1.125rem, 1.07rem + 0.27vw, 1.3125rem);
    --step-2: clamp(1.375rem, 1.26rem + 0.54vw, 1.75rem);
    --step-3: clamp(1.75rem, 1.52rem + 1.07vw, 2.5rem);
    --step-4: clamp(2.25rem, 1.84rem + 2.05vw, 3.75rem);
    --step-5: clamp(2.75rem, 2.05rem + 3.5vw, 5.75rem);

    /* Fixed small sizes for interface text - labels, chips, captions - where a
       fluid size would only add noise, and display sizes for page headings. */
    --text-nano: .62rem;
    --text-micro: .72rem;
    --text-xs: .8rem;
    --text-sm: .86rem;
    --text-md: .94rem;
    --text-lg: 1.3rem;
    --display-1: clamp(2.7rem, 1.5rem + 4.6vw, 5.4rem);
    --display-2: clamp(2rem, 1.3rem + 2.6vw, 3.3rem);
    --display-3: clamp(1.9rem, 1.3rem + 2.2vw, 3rem);

    --space-1: 0.5rem;
    --space-2: 0.75rem;
    --space-3: 1rem;
    --space-4: 1.5rem;
    --space-5: 2rem;
    --space-6: 3rem;
    --space-7: 4.5rem;
    --space-8: 7rem;
    --gutter: clamp(1rem, 0.6rem + 2vw, 2.5rem);
    --section-gap: clamp(4.5rem, 3rem + 7vw, 9rem);

    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --radius-2xl: 40px;
    /* Apple's icon grid: the corner is 22.37% of the side, not a fixed radius. */
    --radius-icon: 22.37%;

    --max-width: 1240px;
    --page-max-width: 1240px;
    --measure: 66ch;

    /* Motion. The spring overshoots a touch and settles, the way an icon lands on
       the home screen; the expo curve is for things that should simply arrive. */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-spring: linear(0, 0.009, 0.035 2.1%, 0.141 4.4%, 0.723 12.9%, 0.938 16.7%, 1.017 19.4%, 1.067, 1.099 24.3%, 1.108 26%, 1.103, 1.085 31.2%, 1.016 38.3%, 0.993 42.5%, 0.983 46.9%, 0.988 55.8%, 1.001 68.6%, 1);
    --dur-fast: 160ms;
    --dur-base: 320ms;
    --dur-slow: 640ms;

    /* Aliases used by legal and support pages. */
    --page-bg: var(--bg);
    --page-surface: var(--bg-elevated);
    --page-surface-strong: light-dark(#fff, #23201b);
    --page-line: var(--line);
    --page-line-strong: var(--line-strong);
    --page-text: var(--text);
    --page-muted: var(--text-muted);
    --page-soft: var(--text-soft);
    --page-shadow: var(--shadow-md);
    --page-shadow-soft: var(--shadow-sm);
    --page-radius-xl: var(--radius-xl);
    --page-radius-lg: var(--radius-lg);
    --page-radius-md: var(--radius-md);
    --page-radius-sm: var(--radius-sm);
    --app-accent: var(--accent);
    --app-accent-soft: var(--accent-soft);
    --app-contrast: var(--text-inverse);

    --nav-wash: light-dark(rgba(243, 239, 230, 0.82), rgba(19, 18, 15, 0.8));
    /* A surface that inverts against the page: a dark slab in light, the raised
       surface in dark, where nothing can be darker than the page. */
    --panel-bg: light-dark(#1a1915, #1c1a16);
    --panel-text: light-dark(#f7f4ec, #f2ede2);
    --ok: light-dark(#17623b, #5cc98b);
    --bad: light-dark(#9a2f27, #f0857c);
    --warn: light-dark(#a56520, #e0a84e);

    /* Neutral app world, overridden per app below. */
    --world: var(--signal);
    --world-ink: var(--accent);
    --world-tint: var(--bg-muted);
}

:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

/* App worlds. Each app keeps the colour of its own icon: --world is the vivid
   icon colour for fills and glows, --world-ink a shade that reads as text on the
   page (4.5:1 or better in both themes), --world-tint the quiet ground of its
   card. Product pages pick theirs from the body class; cards from a class. */
.world-fix-my-treadmill, body.product-page--fix { --world: #0fcfc4; --world-ink: light-dark(#05645f, #5fe6dc); --world-tint: light-dark(#d5f3ef, #0f2a28); }
.world-takt, body.product-page--takt { --world: #f2694a; --world-ink: light-dark(#b13f22, #ff9b80); --world-tint: light-dark(#fbe3d6, #2e1a13); }
.world-hrm-battery, body.product-page--hrm { --world: #9fbe5d; --world-ink: light-dark(#4b6119, #b9d77a); --world-tint: light-dark(#e5ecd2, #1d2413); }
.world-autoskola-cz-2026, body.product-page--autoskola-cz, body.product-page--autoskola { --world: #1d7c4d; --world-ink: light-dark(#16673f, #6fd3a0); --world-tint: light-dark(#d8eadf, #11261a); }
.world-autoskola-sk-2026, body.product-page--autoskola-sk { --world: #2a5aa6; --world-ink: light-dark(#1f4a8c, #8fb4f0); --world-tint: light-dark(#dbe3f1, #121c2e); }
.world-zbrojak, body.product-page--zbrojak { --world: #5b8a1e; --world-ink: light-dark(#466b15, #a6d066); --world-tint: light-dark(#e2eacf, #19220e); }
.world-fishtest-cz-2026, body.product-page--fishtest { --world: #1d8a90; --world-ink: light-dark(#126268, #6fd0d5); --world-tint: light-dark(#d4ebea, #0f2526); }
.world-nomina, body.product-page--nomina { --world: #6a35c4; --world-ink: light-dark(#55289f, #c4a8ff); --world-tint: light-dark(#e8e0f6, #1e1630); }
.world-katastr-v-kapse, body.product-page--katastr { --world: #2f7a62; --world-ink: light-dark(#246150, #7fd1b4); --world-tint: light-dark(#d9e8e1, #12241e); }
.world-puzzles, body.product-page--puzzles { --world: #f0644f; --world-ink: light-dark(#a8402f, #ff9d8c); --world-tint: light-dark(#efe8da, #221f19); }
.world-qwertiva, body.product-page--qwertiva { --world: #e0a419; --world-ink: light-dark(#8a6206, #f2c45a); --world-tint: light-dark(#f4e8c8, #29220f); }
.world-avunio { --world: #4b7861; --world-ink: light-dark(#3c624f, #9fcdb4); --world-tint: light-dark(#e1eadf, #17211b); }
.world-puzzle-folio { --world: #24407a; --world-ink: light-dark(#24407a, #a9bdf0); --world-tint: light-dark(#dfe3ee, #121827); }