/* TRESiUpskill brand: colour tokens (dark by default, light on request) and the animated wordmark.
   Used by the sign-in page, the first sign-in setup and the workspace chooser. */

:root,
:root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #080b10;
    --bg-2: #0d1219;
    --surface: #11171f;
    --surface-2: #171f2a;
    --input-bg: #141b25;
    --line: rgba(222, 232, 244, 0.08);
    --line-2: rgba(222, 232, 244, 0.16);
    --text: #e8eef5;
    --muted: #8e9aaa;
    --faint: #5d6877;
    --accent: #6da9d2;
    --accent-2: #4fb3a9;
    --warm: #e9a07a;
    --btn-bg: #e8eef5;
    --btn-text: #0a0f16;
    --danger: #f2948a;
    --danger-bg: rgba(242, 148, 138, 0.1);
    --success: #7fd3a8;
    --success-bg: rgba(127, 211, 168, 0.1);
    --shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 20px 50px -20px rgba(0, 0, 0, 0.7);
    --input-ring: 0 0 0 1px rgba(222, 232, 244, 0.09), 0 2px 3px -1px rgba(0, 0, 0, 0.4);
    --tl-ink: #eef3f9;
    --tl-chev: #6da9d2;
    --tl-glint: #ffffff;
}

:root[data-theme="light"] {
    color-scheme: light;
    --bg: #f2f4f7;
    --bg-2: #e9edf2;
    --surface: #ffffff;
    --surface-2: #f6f8fa;
    --input-bg: #ffffff;
    --line: rgba(10, 26, 63, 0.08);
    --line-2: rgba(10, 26, 63, 0.16);
    --text: #0b1626;
    --muted: #556375;
    --faint: #8a96a5;
    --accent: #1e5f74;
    --accent-2: #2a8a80;
    --warm: #c8693f;
    --btn-bg: #0e1928;
    --btn-text: #ffffff;
    --danger: #b9382a;
    --danger-bg: rgba(185, 56, 42, 0.08);
    --success: #1d7a50;
    --success-bg: rgba(29, 122, 80, 0.08);
    --shadow: 0 1px 2px rgba(10, 26, 63, 0.06), 0 24px 50px -24px rgba(10, 26, 63, 0.25);
    --input-ring: 0 0 0 1px rgba(25, 28, 33, 0.08), 0 2px 3px -1px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(25, 28, 33, 0.02);
    --tl-ink: #0a1a3f;
    --tl-chev: #233466;
    --tl-glint: #6da9d2;
}

/* ---------- Wordmark ---------- */
.tresi-logo {
    --tl-size: 1.6rem;
    display: inline-flex;
    position: relative;
    font-family: "Poppins", system-ui, sans-serif;
    font-weight: 700;
    font-size: var(--tl-size);
    line-height: 1;
    letter-spacing: -0.012em;
    color: var(--tl-ink);
    text-decoration: none;
    padding-top: 0.84em;               /* room for the chevron above the caps */
    -webkit-tap-highlight-color: transparent;
}
.tresi-logo--sm { --tl-size: 1.15rem; }
.tresi-logo--md { --tl-size: 1.6rem; }
.tresi-logo--lg { --tl-size: 2.4rem; }
.tresi-logo--xl { --tl-size: 3.4rem; }

.tl-word { display: inline-flex; align-items: baseline; }

.tl-l {
    display: inline-block;
    position: relative;
    opacity: 0;
    transform: translateY(0.42em);
    filter: blur(6px);
    animation: tl-rise 0.72s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    animation-delay: calc(var(--i) * 48ms + 120ms);
    transition: translate 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);   /* hover uses translate, so it adds to the animated transform */
}

/* the dotless i grows up from its foot */
.tl-i { transform-origin: 50% 100%; }

.tl-chev {
    position: absolute;
    left: 50%;
    bottom: 0.86em;
    width: 0.86em;
    height: 0.69em;
    overflow: visible;
    transform: translate(-50%, 0);
    transition: translate 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
    animation: tl-lift 1.15s cubic-bezier(0.34, 1.56, 0.64, 1) 1.45s both;
}
.tl-chev path {
    fill: none;
    stroke-width: 19;
    stroke-linecap: butt;
    stroke-linejoin: miter;
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    animation: tl-draw 0.78s cubic-bezier(0.65, 0, 0.35, 1) 0.78s forwards;
}

.tresi-logo:hover .tl-chev,
.tresi-logo:focus-visible .tl-chev { translate: 0 -0.14em; }
.tresi-logo:hover .tl-up,
.tresi-logo:focus-visible .tl-up { translate: 0 -0.06em; }
.tresi-logo:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: 6px; }

@keyframes tl-rise {
    to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
@keyframes tl-draw {
    to { stroke-dashoffset: 0; }
}
@keyframes tl-lift {
    0%   { transform: translate(-50%, 0); }
    35%  { transform: translate(-50%, -0.2em); }
    100% { transform: translate(-50%, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .tl-l, .tl-chev, .tl-chev path { animation: none !important; opacity: 1; transform: none; filter: none; stroke-dashoffset: 0; }
    .tl-chev { transform: translate(-50%, 0); }
}