/* nucifera tokens: the closed vocabulary of the house style.
   Dark is the default (:root): monochrome, white ink and a near-white main button, colour only for status.
   Light "Сутінки" is [data-theme="light"]: lilac mist with a violet accent.
   .night re-applies the dark roles to one element (the hero object in the light theme); there it keeps the violet.
   Use roles in code (var(--accent)), never the raw values. Brand overrides go to .design/brand.css. */

/* Geist зі свого адреса (CSP: font-src self), кирилиця окремим файлом — як у вікнах бота */
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("fonts/geist-cyrillic-ext.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("fonts/geist-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("fonts/geist-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;
}
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/geist-mono-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;
}

:root, .night {
  color-scheme: dark;
  /* surfaces: a lightness ladder, each step lighter */
  --bg-0: #07060b;      /* canvas */
  --bg-1: #100f16;      /* raised: cards, fields */
  --bg-2: #17161f;      /* raised twice: chips, icon tiles, hover */
  --bg-3: #1f1e29;      /* selected, pressed */
  /* hairlines */
  --line-1: rgb(255 255 255 / .07);
  --line-2: rgb(255 255 255 / .11);
  --line-3: rgb(255 255 255 / .16);
  --edge-hi: rgb(255 255 255 / .16);   /* top-edge highlight of raised panels */
  --edge-top: rgb(255 255 255 / .08);  /* the 1px light top edge of the one raised surface (.lit) */
  --grain-alpha: .045;                 /* fixed grain over a large dark gradient (.grain) */
  --sheen: rgb(255 255 255 / .55);     /* the one pass of light over the main button */
  /* text: primary and ONE secondary grey; --fg-3 is the same grey, kept as an alias */
  --fg-1: #f5f4fa;      /* 18:1 primary */
  --fg-2: #adacbd;      /* all secondary text: 9:1 on --bg-0, 7.4:1 on --bg-3 */
  --fg-3: #adacbd;
  --fg-4: #6a6879;      /* 3.7:1 decoration only, never text */
  /* accent: no hue in dark. The accent is the ink white: the current item, the newest mark; links are underlined */
  --accent: #f5f4fa;
  --accent-solid: #ececee;      /* the main button fill; label #111113 at 16:1 */
  --accent-tint: rgb(255 255 255 / .10);
  --on-accent: #111113;
  --link: var(--accent);
  --link-line: underline;
  /* main action */
  --cta-bg: var(--accent-solid);
  --cta-fg: var(--on-accent);
  /* status: text colour + its own tint behind */
  --ok: #4fd18f;   --ok-tint: rgb(79 209 143 / .12);
  --warn: #f2b84b; --warn-tint: rgb(242 184 75 / .12);
  --err: #ff6b6b;  --err-tint: rgb(255 107 107 / .12);
  --focus: rgb(255 255 255 / .5);
  /* depth */
  --shadow-float: 0 4px 24px rgb(0 0 0 / .45), 0 8px 32px rgb(0 0 0 / .35);
  --shadow-card: 0 0 #0000;   /* no card shadow on dark; a valid empty shadow, never "none": it sits in shadow lists with the hairline */
  --scrim: rgb(0 0 0 / .55);   /* behind dialogs and sheets */
  /* glass: full on capable devices, solid fallback is the default in CSS */
  --glass-bg: rgb(7 6 11 / .96);
  --glass-fx: none;
  /* one soft light, landing pages only, behind the hero object */
  --wash: radial-gradient(70% 55% at 50% 0%, rgb(255 255 255 / .06), transparent 75%);
  /* photos keep their clarity */
  --photo-fx: none;
}

:root[data-theme="light"], [data-theme="light"] {
  color-scheme: light;
  --bg-0: #dfddef;      /* lilac mist canvas */
  --bg-1: #f8f7fd;      /* cards */
  --bg-2: #d6d3e7;
  --bg-3: #cecbe0;
  --line-1: rgb(40 25 90 / .10);
  --line-2: rgb(40 25 90 / .15);
  --line-3: rgb(40 25 90 / .22);
  --edge-hi: rgb(40 25 90 / .14);
  --edge-top: rgb(255 255 255 / .9); --grain-alpha: .05; --sheen: rgb(255 255 255 / .22);
  --fg-1: #221a46;      /* violet ink, 12:1 */
  --fg-2: #3c3657;      /* the one secondary grey: 8.5:1 on --bg-0, 7.1:1 on --bg-3 */
  --fg-3: #3c3657;
  --fg-4: #85829a;      /* decoration only */
  --accent: #5a42b2;    /* 5.5:1 on the canvas */
  --accent-solid: #5a42b2;
  --accent-tint: rgb(90 66 178 / .10);
  --on-accent: #ffffff;
  --cta-bg: #1d1545;    /* the night window: dark violet button */
  --cta-fg: #ffffff;
  --link-line: none;
  /* status: dark enough for 4.5:1 on their own tint on every light surface */
  --ok: #0b5e3f;   --ok-tint: rgb(11 94 63 / .10);
  --warn: #6f4700; --warn-tint: rgb(111 71 0 / .10);
  --err: #9c2820;  --err-tint: rgb(156 40 32 / .10);
  --focus: rgb(90 66 178 / .45);
  --shadow-float: 0 1px 4px -1px rgb(30 18 70 / .10), 0 6px 20px rgb(30 18 70 / .10);
  --shadow-card: 0 1px 2px rgb(40 25 90 / .06), 0 4px 14px rgb(40 25 90 / .07);
  --scrim: rgb(20 12 50 / .32);
  --glass-bg: rgb(223 221 239 / .96);
  --wash: none;
}
/* the dark roles again for .night inside the light theme; the light theme's violet stays (violet #8b7cff, 6.2:1) */
[data-theme="light"] .night {
  color-scheme: dark;
  --bg-0: #07060b; --bg-1: #100f16; --bg-2: #17161f; --bg-3: #1f1e29;
  --line-1: rgb(255 255 255 / .07); --line-2: rgb(255 255 255 / .11); --line-3: rgb(255 255 255 / .16); --edge-hi: rgb(255 255 255 / .16);
  --fg-1: #f5f4fa; --fg-2: #adacbd; --fg-3: #adacbd; --fg-4: #6a6879;
  --accent: #8b7cff; --accent-solid: #6e56cf; --accent-tint: rgb(139 124 255 / .14); --on-accent: #ffffff;
  --link-line: none; --focus: rgb(139 124 255 / .55);
  --ok: #4fd18f; --ok-tint: rgb(79 209 143 / .12); --warn: #f2b84b; --warn-tint: rgb(242 184 75 / .12); --err: #ff6b6b; --err-tint: rgb(255 107 107 / .12);
  --shadow-card: 0 10px 28px -12px rgb(30 18 70 / .45);
}

:root {
  /* type: Geist with Cyrillic; one family, three weights */
  --font-sans: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --w-regular: 400; --w-medium: 500; --w-semibold: 600;
  --t-display: 600 32px/1.15 var(--font-sans);   --ls-display: -0.025em;  /* screen title; landing h1 48-64px */
  --t-title: 600 22px/1.25 var(--font-sans);     --ls-title: -0.018em;
  --t-headline: 600 18px/1.3 var(--font-sans);   --ls-headline: -0.012em;
  --t-body: 400 16px/1.5 var(--font-sans);       --ls-body: -0.006em;   /* body is 16px: read on the go */
  --t-body-lg: 400 16px/1.5 var(--font-sans);
  --t-small: 400 14px/1.45 var(--font-sans);     /* all secondary text */
  --t-time: 400 13px/1.4 var(--font-sans);       /* timestamps only */
  --t-label: 500 16px/1.35 var(--font-sans);
  /* space: 4px grid */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-12: 48px; --s-16: 64px; --s-24: 96px;
  --pad-screen: 20px;
  /* radii: pill for chips, 12 for fields and buttons, 16 to 20 for cards */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px; --r-pill: 999px;
  /* touch */
  --tap: 44px; --field-h: 48px; --btn-h: 50px;
  /* motion: two tempos. The interface tempo (menus, tabs, sheets, rows) matches measured products, so frequent things feel quick;
     the moment tempo is calm and kept for rare, first-time motion. Pick the role, not the nearest number. Rules: references/motion.md */
  --dur-0: 0ms;          /* hover highlight in; keyboard-driven actions and actions used 100+ times a day */
  --dur-press: 100ms;    /* press feedback */
  --dur-fast: 120ms;     /* tooltip out */
  --dur-exit: 180ms;     /* leaving (menu, dialog, toast), hover highlight out, colour and state changes, crossfades */
  --dur-enter: 240ms;    /* arriving or moving: menu, dialog, selection indicator, accordion, screen change, list rows */
  --dur-sheet: 420ms;    /* bottom sheet in (spring), toast in */
  --stagger: 50ms;       /* between list rows on first show, at most five rows */
  /* moments: rare, once, on an event (references/motion.md, section 5) */
  --dur-moment: 450ms;   /* shared element morph, success check, a block settling */
  --dur-roll: 600ms;     /* a number rolling to its new value after an action */
  --dur-signature: 700ms; /* the signature element arriving on its first show */
  --dur-draw: 800ms;     /* a line or chart drawing itself once */
  --dur-hero: 840ms;     /* landing hero, scroll reveal, the product window */
  --dur-sheen: 1100ms;   /* one pass of light over the main button */
  --stagger-hero: 105ms; /* between hero lines */
  --ease-out: cubic-bezier(.23, 1, .32, 1);     /* enter and exit */
  --ease-move: cubic-bezier(.77, 0, .175, 1);   /* moving within the screen */
  --ease-color: ease;                           /* hover and colour */
  --ease-spring: var(--ease-out);               /* sheets and the selection pill; a 2% spring below where linear() works */
  --move-sm: 6px; --move-md: 12px;              /* how far arriving content travels */
  --travel: 1;                                  /* 0 under reduced motion: off-screen entries become fades */
  --press-scale: .97; --scale-menu: .95; --scale-dialog: .96; --scale-tip: .97;
  --ease: var(--ease-out);                                                        /* older names */
  --dur-1: var(--dur-press); --dur-2: var(--dur-exit); --dur-3: var(--dur-enter);
}
@supports (animation-timing-function: linear(0, 1)) {
  :root { --ease-spring: linear(0, .05, .165, .309, .456, .591, .708, .802, .875, .929, .967, .993, 1.008, 1.016, 1.02, 1.02, 1.018, 1.015, 1.012, 1.01, 1.007, 1.005, 1.003, 1.002, 1); }
}

/* glass levels: CSS default is solid; frame.js / tg-adapter.js sets data-fx by device class */
[data-fx="full"] { --glass-bg: rgb(7 6 11 / .72); --glass-fx: blur(20px) saturate(140%); }
[data-fx="lite"] { --glass-bg: rgb(7 6 11 / .85); --glass-fx: blur(12px); }
[data-theme="light"][data-fx="full"], [data-theme="light"][data-fx="lite"] { --glass-bg: rgb(223 221 239 / .94); --glass-fx: blur(8px); }

/* Cyrillic headings need air above the dots of Ї and Й */
:lang(uk) :is(h1, h2, h3), :lang(ru) :is(h1, h2, h3) { line-height: max(1.15, var(--lh, 1.15)); }

/* reduced motion keeps the meaning: no travel and no scaling, short fades, moments show their end state; colour, focus rings and loaders stay */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 100ms; --dur-exit: 150ms; --dur-enter: 180ms; --dur-sheet: 180ms; --dur-hero: 200ms;
    --dur-moment: 160ms; --dur-roll: 160ms; --dur-signature: 0ms; --dur-draw: 0ms; --dur-sheen: 0ms;
    --stagger: 0ms; --stagger-hero: 0ms; --move-sm: 0px; --move-md: 0px; --travel: 0;
    --press-scale: 1; --scale-menu: 1; --scale-dialog: 1; --scale-tip: 1;
    --ease-spring: var(--ease-out); --ease-move: var(--ease-out); }
}
/* weak devices (a platform adapter sets data-perf="low"): no stagger, no spring; motion.js shows moments in their end state */
[data-perf="low"] { --stagger: 0ms; --stagger-hero: 0ms; --ease-spring: var(--ease-out); }