/* Shared design tokens of the TechStacksIn redesign (colours, type, radii, shadows).
   Every redesigned page loads this file first; page rules apply only under .tsi-redesign. */

@font-face {
    font-family: "Plus Jakarta Sans";
    src: url("fonts/plus-jakarta-sans-latin-wght.woff2") format("woff2");
    font-weight: 200 800;
    font-style: normal;
    /* Never swap visibly: if the file is not ready at once, this page view keeps the fallback. */
    font-display: optional;
    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 {
    --tsi-blue: #3e6994;
    --tsi-blue-dark: #2f4f70;
    --tsi-blue-active: #35597e;
    --tsi-ink: #1f2933;
    --tsi-muted: #52606d;
    --tsi-time: #616e7c;
    --tsi-field: #7b8794;
    --tsi-line: #d9e2ec;
    --tsi-line-soft: #eef1f4;
    --tsi-bg: #f5f7fa;
    --tsi-tint: #eef4f9;
    --tsi-tint-strong: #e3eef9;
    --tsi-badge-text: #24507a;
    --tsi-danger: #b42318;
    --tsi-danger-tint: #fef3f2;
    --tsi-success: #1e6b3a;
    --tsi-success-tint: #e8f5ec;
    --tsi-warning: #8a5300;
    --tsi-warning-tint: #fff6e5;
    --tsi-font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --tsi-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    --tsi-radius-field: 10px;
    --tsi-radius-button: 12px;
    --tsi-radius-card: 16px;
    --tsi-radius-hero: 24px;
    --tsi-shadow-card: 0 1px 2px rgba(31, 41, 51, 0.05);
    --tsi-shadow-raised: 0 1px 2px rgba(31, 41, 51, 0.04), 0 16px 40px -12px rgba(31, 41, 51, 0.16);
    --tsi-shadow-pop: 0 24px 48px -16px rgba(31, 41, 51, 0.28), 0 2px 6px rgba(31, 41, 51, 0.06);
    --tsi-content: 1132px;
    --tsi-spinner: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='%23d9e2ec' stroke-width='3'/%3E%3Cpath d='M12 3a9 9 0 0 1 9 9' fill='none' stroke='%233e6994' stroke-width='3' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='0.8s' repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E");
    --tsi-spinner-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='%23ffffff' stroke-opacity='.35' stroke-width='3'/%3E%3Cpath d='M12 3a9 9 0 0 1 9 9' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='0.8s' repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E");
}

body.tsi-redesign {
    background-color: var(--tsi-bg) !important;
    color: var(--tsi-ink);
    font-family: var(--tsi-font);
    -webkit-font-smoothing: antialiased;
}

/* One typeface everywhere, except where commands are shown. */
body.tsi-redesign *:not(code):not(pre):not(kbd):not(samp) {
    font-family: var(--tsi-font) !important;
}

body.tsi-redesign :is(code, pre, kbd, samp) {
    font-family: var(--tsi-mono);
}

body.tsi-redesign :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid var(--tsi-blue);
    outline-offset: 2px;
}

/* Restyled elements set their own display; the hidden attribute must still win. */
body.tsi-redesign [hidden] {
    display: none !important;
}

/* The old animated GIFs stay in the markup (scripts toggle them); a CSS spinner is drawn instead. */
body.tsi-redesign img[src*="ajax-loader.gif"] {
    width: 24px;
    height: 24px;
    object-position: -999px 0;
    background: var(--tsi-spinner) center / 24px 24px no-repeat;
}

/* ------------------------------------------------------------------ Header (all pages) */
body.tsi-redesign .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    height: 64px;
    padding: 0 max(24px, calc((100% - var(--tsi-content)) / 2));
    background: var(--tsi-blue);
}

body.tsi-redesign .header #ml {
    color: #ffffff;
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1;
    text-decoration: none;
}

body.tsi-redesign .header :is(a, button):focus-visible {
    outline-color: #ffffff;
}

@media (max-width: 767px) {
    body.tsi-redesign .header {
        height: 60px;
        padding: 0 4px 0 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.tsi-redesign *,
    body.tsi-redesign *::before,
    body.tsi-redesign *::after {
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}