/*
 * Florenda Graphite — design tokens of the whole Florenda ecosystem (03.11.2026).
 * One file for FlorendaWorld, FlorendaHost, FlorendaShort, FlorendaID and the FBSi hub.
 * Base: graphite neutrals (no navy, no pure black, no pure white surfaces).
 * Accent: Florenda Violet #7C5CFC — buttons, links, focus, selection only (≤10% of a screen), flat, no pink gradients.
 * Logo: monochrome (text colour) + the red dot #FF2D46, the only red in the brand.
 * Day and night share hue, radii, weights and accent; day is a soft grey, not white.
 * Served from https://florenda.world/brand/fds.css (source: C:\FBSi\Develop\brand\florenda\fds.css).
 */
:root {
    --fd-bg: #101115;
    --fd-bg-2: #15161b;
    --fd-surface: #1a1b21;
    --fd-raised: #24252c;
    --fd-hover: #2c2d35;
    --fd-line: rgba(255, 255, 255, 0.075);
    --fd-line-2: rgba(255, 255, 255, 0.14);
    --fd-text: #ececef;
    --fd-text-2: #b6b7be;
    --fd-muted: #8b8d96;
    --fd-accent: #7c5cfc;
    --fd-accent-hover: #8a6dff;
    --fd-accent-ink: #ab9dff;
    --fd-accent-soft: rgba(124, 92, 252, 0.16);
    --fd-on-accent: #ffffff;
    --fd-signal: #ff2d46;
    --fd-ok: #3fb97a;
    --fd-warn: #e2a23b;
    --fd-danger: #e5484d;
    --fd-header: rgba(16, 17, 21, 0.78);
    --fd-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 14px 36px rgba(0, 0, 0, 0.36);
    --fd-r-sm: 10px;
    --fd-r: 14px;
    --fd-r-lg: 20px;
    --fd-font: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
    --fd-mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace;
    color-scheme: dark;
}
/* Day: soft graphite-grey paper. Pages with a theme switch set data-theme; others follow the OS. */
[data-theme="light"] {
    --fd-bg: #d3d4d9;
    --fd-bg-2: #cccdd3;
    --fd-surface: #dddee2;
    --fd-raised: #e4e5e8;
    --fd-hover: #d5d6db;
    --fd-line: rgba(22, 23, 28, 0.11);
    --fd-line-2: rgba(22, 23, 28, 0.2);
    --fd-text: #18191d;
    --fd-text-2: #34363c;
    --fd-muted: #55575f;
    --fd-accent: #6b4ef0;
    --fd-accent-hover: #5d40e4;
    --fd-accent-ink: #5537d6;
    --fd-accent-soft: rgba(107, 78, 240, 0.12);
    --fd-ok: #1c7443;
    --fd-warn: #855507;
    --fd-danger: #b92d33;
    --fd-header: rgba(211, 212, 217, 0.88);
    --fd-shadow: 0 1px 0 rgba(255, 255, 255, 0.28) inset, 0 8px 24px rgba(22, 23, 28, 0.09);
    color-scheme: light;
}
@media (prefers-color-scheme: light) {
    :root:not([data-theme]) {
        --fd-bg: #d3d4d9;
        --fd-bg-2: #cccdd3;
        --fd-surface: #dddee2;
        --fd-raised: #e4e5e8;
        --fd-hover: #d5d6db;
        --fd-line: rgba(22, 23, 28, 0.11);
        --fd-line-2: rgba(22, 23, 28, 0.2);
        --fd-text: #18191d;
        --fd-text-2: #34363c;
        --fd-muted: #55575f;
        --fd-accent: #6b4ef0;
        --fd-accent-hover: #5d40e4;
        --fd-accent-ink: #5537d6;
        --fd-accent-soft: rgba(107, 78, 240, 0.12);
        --fd-ok: #1c7443;
        --fd-warn: #855507;
        --fd-danger: #b92d33;
        --fd-header: rgba(211, 212, 217, 0.88);
        --fd-shadow: 0 1px 0 rgba(255, 255, 255, 0.28) inset, 0 8px 24px rgba(22, 23, 28, 0.09);
        color-scheme: light;
    }
}
::selection { background: var(--fd-accent-soft); color: var(--fd-text); }

/* Scrollbars: thin, graphite, everywhere (page, panels, popups). No arrows, no system look. */
:root { --fd-scroll: rgba(127, 129, 140, .38); --fd-scroll-hover: rgba(127, 129, 140, .62); }
@supports not selector(::-webkit-scrollbar) {
    * { scrollbar-width: thin; scrollbar-color: var(--fd-scroll) transparent; }
}
*::-webkit-scrollbar { width: 10px; height: 10px; background: transparent; }
*::-webkit-scrollbar-track, *::-webkit-scrollbar-corner { background: transparent; }
*::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
*::-webkit-scrollbar-thumb { border: 3px solid transparent; border-radius: 999px; background: var(--fd-scroll) padding-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--fd-scroll-hover) padding-box; }

/* Brand mark: <svg class="fd-mark"> with strokes in currentColor and the red dot (.fd-dot). */
.fd-mark { color: var(--fd-text); }
.fd-mark .fd-dot { fill: var(--fd-signal); }
.fd-id { display: inline-grid; place-items: center; width: 22px; height: 22px; flex: none; border-radius: 7px; background: var(--fd-text); color: var(--fd-bg); font: 800 10.5px/1 var(--fd-font); letter-spacing: .02em; position: relative; }
.fd-id::after { content: ""; position: absolute; right: -2px; bottom: -2px; width: 7px; height: 7px; border-radius: 50%; background: var(--fd-signal); box-shadow: 0 0 0 2px var(--fd-surface); }

/* Space stage (hero of the landing and of FlorendaHost): stays dark in both themes, so tokens are re-declared here. */
.fd-space {
    --fd-bg: #0c0d11; --fd-bg-2: #131419; --fd-surface: #17181d; --fd-raised: #202126; --fd-hover: #2a2b30;
    --fd-line: rgba(255, 255, 255, .085); --fd-line-2: rgba(255, 255, 255, .16);
    --fd-text: #ececef; --fd-text-2: #b6b7be; --fd-muted: #8b8d96;
    --fd-accent: #7c5cfc; --fd-accent-hover: #8a6dff; --fd-accent-ink: #ab9dff; --fd-accent-soft: rgba(124, 92, 252, .16);
    --fd-ok: #3fb97a; --fd-warn: #e2a23b; --fd-danger: #e5484d;
    --fd-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 24px 60px rgba(0, 0, 0, .45);
    color-scheme: dark;
    position: relative; isolation: isolate; overflow: hidden; color: var(--fd-text);
    background:
        radial-gradient(900px 560px at 74% 8%, rgba(124, 92, 252, .17), transparent 62%),
        radial-gradient(720px 480px at 6% 92%, rgba(124, 92, 252, .08), transparent 60%),
        #0c0d11;
}
.fd-space canvas[data-fd-stars] { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }

/* Buttons: one behaviour everywhere. Hover, press, keyboard focus, disabled and busy are all handled here.
   `scale` (not transform) for the press, so it never fights a positioning transform. */
.fd-btn {
    position: relative; overflow: hidden; isolation: isolate;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 44px; padding: 0 18px;
    border: 1px solid transparent; border-radius: var(--fd-r-sm);
    font: 600 15px/1.2 var(--fd-font); letter-spacing: -.005em; white-space: nowrap; text-decoration: none;
    cursor: pointer; -webkit-user-select: none; user-select: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
    transition: background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease, scale .1s ease;
}
.fd-btn:active:not(:disabled):not([aria-busy="true"]) { scale: .985; }
.fd-btn:focus-visible, .fd-icon-btn:focus-visible { outline: 2px solid var(--fd-accent); outline-offset: 2px; }
.fd-btn:disabled, .fd-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; box-shadow: none; }
.fd-btn--primary { background: var(--fd-accent); color: var(--fd-on-accent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .22), 0 8px 20px -10px var(--fd-accent); }
.fd-btn--primary:hover:not(:disabled) { background: var(--fd-accent-hover); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24), 0 1px 2px rgba(0, 0, 0, .22), 0 10px 24px -8px var(--fd-accent); }
.fd-btn--primary::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .2) 50%, transparent 70%); transform: translateX(-110%); }
.fd-btn--primary:hover:not(:disabled)::after { transform: translateX(110%); transition: transform .7s ease; }
.fd-btn--ghost { background: var(--fd-raised); border-color: var(--fd-line-2); color: var(--fd-text); }
.fd-btn--ghost:hover:not(:disabled) { background: var(--fd-hover); border-color: var(--fd-muted); }
.fd-btn--danger { background: transparent; border-color: color-mix(in srgb, var(--fd-danger) 45%, transparent); color: var(--fd-danger); }
.fd-btn--danger:hover:not(:disabled) { background: color-mix(in srgb, var(--fd-danger) 12%, transparent); }
.fd-btn--lg { min-height: 52px; padding: 0 26px; font-size: 16px; border-radius: 13px; }
.fd-btn--block { width: 100%; }
.fd-btn[aria-busy="true"] { color: transparent !important; cursor: progress; }
.fd-btn[aria-busy="true"]::before { content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff; border-radius: 50%; animation: fd-spin .7s linear infinite; }
.fd-btn--ghost[aria-busy="true"]::before { border-color: var(--fd-line-2); border-top-color: var(--fd-text); }
@keyframes fd-spin { to { transform: rotate(360deg); } }
.fd-icon-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none; padding: 0; border: 1px solid var(--fd-line); border-radius: var(--fd-r-sm); background: var(--fd-surface); color: var(--fd-text-2); cursor: pointer; touch-action: manipulation; transition: color .16s ease, border-color .16s ease, background-color .16s ease, scale .1s ease; }
.fd-icon-btn:hover { color: var(--fd-text); border-color: var(--fd-line-2); background: var(--fd-raised); }
.fd-icon-btn:active { scale: .96; }
@media (prefers-reduced-motion: reduce) {
    .fd-btn, .fd-icon-btn { transition: none; }
    .fd-btn--primary:hover::after { transition: none; transform: translateX(-110%); }
}