/* ==========================================================================
   FormCraft — design tokens

   One dark stage, four colour roles:
     violet = brand, structure, primary action (MudBlazor's default primary)
     yellow = the live binding between a line of C# and the control it made
     mint   = valid
     coral  = error
   Forms keep MudBlazor's light palette and sit on light panels, the way they
   look in a visitor's own app. Everything around them is this dark stage.
   The accent follows the adapter picked in the top bar: violet for MudBlazor,
   Fluent 2's brand blue under html[data-adapter="fluentui"] (#490).
   ========================================================================== */

:root {
    --fc-bg: #0A0B16;
    --fc-bg-2: #10122A;
    --fc-bg-3: #151838;
    --fc-panel: #12142E;
    --fc-line: #262A52;
    --fc-line-2: #33386A;
    --fc-text: #EEF0FF;
    --fc-text-2: #BCC1E3;
    --fc-muted: #8D93BE;

    --fc-violet: #594AE2;
    --fc-violet-2: #8F82F5;
    --fc-violet-slab: #4536C9;
    --fc-violet-ink: #B9B0FA;
    --fc-violet-hover: #6B5DEB;
    --fc-violet-deep: #1B1452;
    --fc-on-violet-2: #E0DCFF;
    --fc-violet-onwhite: #2E2291;

    --fc-yellow: #FFD166;
    --fc-mint: #3DDC97;
    --fc-coral: #FF6F59;

    --fc-tk-kw: #C3A6FF;
    --fc-tk-ty: #5EEAD4;
    --fc-tk-fn: #FFD166;
    --fc-tk-str: #FFA48F;
    --fc-tk-dir: #FF7AB6;
    --fc-tk-attr: #8AB4FF;
    --fc-tk-pun: #8D93BE;
    --fc-tk-num: #F7A8FF;
    --fc-tk-com: #6B7299;

    --fc-display: 'Sora', 'Helvetica Neue', sans-serif;
    --fc-body: 'Onest', system-ui, sans-serif;
    --fc-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
    --fc-track: -.045em;

    --fc-ease: cubic-bezier(.16, 1, .3, 1);
    --fc-maxw: 1240px;
    --fc-gut: clamp(16px, 3.2vw, 40px);

    color-scheme: dark;
}

:root[data-adapter="fluentui"] {
    --fc-violet: #0F6CBD;
    --fc-violet-2: #479EF5;
    --fc-violet-slab: #115EA3;
    --fc-violet-ink: #96C6FA;
    --fc-violet-hover: #0F548C;
    --fc-violet-deep: #082338;
    --fc-on-violet-2: #EBF3FC;
    --fc-violet-onwhite: #0F548C;
}

html body {
    margin: 0;
    background: var(--fc-bg);
    color: var(--fc-text);
    font-family: var(--fc-body);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    scrollbar-color: var(--fc-line-2) var(--fc-bg);
}

::selection { background: var(--fc-violet); color: #fff; }
input, select, textarea { caret-color: var(--fc-violet); }
.fc-shell a { color: var(--fc-violet-ink); text-underline-offset: 3px; }
code, kbd, pre { font-family: var(--fc-mono); }
.fc-num { font-variant-numeric: tabular-nums; }

.fc-wrap {
    max-width: var(--fc-maxw);
    margin: 0 auto;
    padding-left: var(--fc-gut);
    padding-right: var(--fc-gut);
}

.fc-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

svg.fc-i {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: none;
}

/* Headings: Sora, tight. */
.fc-h1 {
    font-family: var(--fc-display);
    font-weight: 800;
    font-size: clamp(2.3rem, 5.2vw, 4.6rem);
    line-height: 1;
    letter-spacing: var(--fc-track);
    margin: 0;
    text-wrap: balance;
    color: var(--fc-text);
}

.fc-h2 {
    font-family: var(--fc-display);
    font-weight: 700;
    font-size: clamp(1.9rem, 3.8vw, 3.2rem);
    line-height: 1.04;
    letter-spacing: var(--fc-track);
    margin: 0;
    text-wrap: balance;
    max-width: 20ch;
    color: var(--fc-text);
}

.fc-accent { color: var(--fc-violet-2); }
.fc-accent--mint { color: var(--fc-mint); }

.fc-lede {
    font-size: clamp(1.05rem, 1.35vw, 1.2rem);
    color: var(--fc-text-2);
    margin: 0;
    max-width: 58ch;
}

.fc-lede code { color: var(--fc-tk-ty); }

.fc-sub {
    color: var(--fc-text-2);
    font-size: 1.1rem;
    max-width: 56ch;
    margin: 18px 0 0;
}

/* Buttons */
.fc-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 50px;
    padding: 0 22px;
    border-radius: 12px;
    font: inherit;
    font-weight: 600;
    font-size: 16px;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    transition: transform .2s var(--fc-ease), background .2s, box-shadow .2s;
}

.fc-shell .fc-btn--primary {
    background: var(--fc-violet);
    color: #fff;
    box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .7);
}

.fc-shell .fc-btn--primary:hover { background: var(--fc-violet-hover); transform: translateY(-1px); }
.fc-shell .fc-btn--ghost { color: var(--fc-text); border-color: var(--fc-line-2); background: transparent; }
.fc-shell .fc-btn--ghost:hover { background: var(--fc-bg-3); }
.fc-btn--sm { height: 40px; padding: 0 16px; font-size: 14.5px; border-radius: 10px; }

/* Focus: yellow ring on the dark stage. MudBlazor ships `button:focus { outline: none }`,
   so the element-qualified selectors are needed to win. */
:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
.mud-button-root:focus-visible,
.mud-icon-button:focus-visible {
    outline: 2px solid var(--fc-yellow);
    outline-offset: 3px;
    border-radius: 4px;
}

.fc-skip-link {
    position: absolute;
    left: 8px;
    top: -60px;
    z-index: 2000;
    padding: 0.65rem 1.1rem;
    background: var(--fc-yellow);
    color: #1B1300;
    font-weight: 600;
    border-radius: 10px;
    text-decoration: none;
    transition: top 0.15s ease;
}

.fc-skip-link:focus { top: 8px; }

/* Code: one span per line, hanging indent instead of horizontal scroll (see js/code.js). */
.fc-code {
    margin: 0;
    padding: 18px 0 22px;
    font-size: clamp(12px, 1.05vw, 13.5px);
    line-height: 1.72;
    color: #D9DCF5;
    background: transparent;
    counter-reset: ln;
    overflow: visible;
}

.fc-code code { font: inherit; background: none; color: inherit; padding: 0; display: block; }

.fc-code .cl {
    display: block;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    counter-increment: ln;
    padding: 0 20px 0 calc(4.6em + (var(--ind, 0) + 4) * 1ch);
    text-indent: calc(-4.6em - (var(--ind, 0) + 4) * 1ch);
    min-height: 1.72em;
    transition: background .25s;
}

.fc-code .cl::before {
    content: counter(ln);
    display: inline-block;
    width: 3.4em;
    padding-right: 1.2em;
    text-align: right;
    color: #464C7C;
    text-indent: 0;
    font-variant-numeric: tabular-nums;
}

.fc-code--plain .cl { padding-left: calc(18px + (var(--ind, 0) + 4) * 1ch); text-indent: calc((var(--ind, 0) + 4) * -1ch); }
.fc-code--plain .cl::before { display: none; }
.fc-code .cl.is-sync { background: rgba(255, 209, 102, .09); }
.fc-code .cl.is-sync::before { color: var(--fc-yellow); }

.tk-kw { color: var(--fc-tk-kw); }
.tk-ty { color: var(--fc-tk-ty); }
.tk-fn { color: var(--fc-tk-fn); }
.tk-str { color: var(--fc-tk-str); }
.tk-dir, .tk-tag { color: var(--fc-tk-dir); }
.tk-attr { color: var(--fc-tk-attr); }
.tk-pun { color: var(--fc-tk-pun); }
.tk-num { color: var(--fc-tk-num); }
.tk-com { color: var(--fc-tk-com); font-style: italic; }


@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}