/* === TOSHI DESIGN SYSTEM === */

@font-face {
    font-family: 'toshifont';
    src: url('/assets/fonts/toshimedium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'YOURFONTMEDIUM';
    src: url('/assets/fonts/MartinaPlantijn-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

:root {
    --bg: #111111;
    --bg-dark: #0a0a0a;
    --text: rgba(240, 237, 232, 0.85);
    --dim: rgba(240, 237, 232, 0.35);
    --muted: rgba(240, 237, 232, 0.12);
    --ash: #8a8a8a;
    --line: rgba(138, 138, 138, 0.12);
    --white: #ffffff;
    --font: 'Inter', -apple-system, sans-serif;
    --fluo: #39ff14;
    --salmon: #E8927C;
    --brand: 'toshifont', Georgia, serif;
    --display: 'YOURFONTMEDIUM', Georgia, serif;
}

/* Daylight theme — fallback values, overridden dynamically by solar engine via :root */
body[data-theme="daylight"] {
    --white: #1a1816;
    --fluo: #e07830;
    --salmon: #d87b64;
}

/* Reset */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    -webkit-font-smoothing: antialiased;
    transition: background-color 1.5s ease, color 1.5s ease;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* === NAV === */
.tl-nav {
    background: transparent;
    border-bottom: none;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.tl-nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 clamp(20px, 2.5vw, 40px);
    height: 50px;
}

.tl-nav-brand {
    display: flex;
    align-items: center;
    font-family: var(--brand);
    font-size: 17px;
    color: var(--text);
    letter-spacing: 3px;
    text-transform: uppercase;
    text-decoration: none;
}

.toshi-char-mask {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
}

.toshi-char-inner {
    display: inline-block;
}

.toshi-reg {
    font-family: var(--font);
    font-size: 7px;
    vertical-align: super;
    letter-spacing: 0;
}

.tl-nav-links {
    display: flex;
    gap: 6px;
}

.tl-nav-links a {
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--dim);
    padding: 4px 14px;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.tl-nav-links a:hover {
    color: var(--text);
    background: var(--muted);
}

.tl-nav-links a.active {
    color: var(--text);
}

.tl-nav-links a.tl-nav-client {
    margin-left: 10px;
    border: 1px solid var(--line);
    border-radius: 100px;
}

.tl-nav-links a.tl-nav-client:hover {
    border-color: var(--ash);
}

body[data-theme="daylight"] .tl-nav {
    background: transparent;
}


/* === FOOTER === */
.tl-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px clamp(20px, 2.5vw, 40px);
    border-top: 1px solid var(--line);
    font-size: 10px;
    color: var(--dim);
}

.tl-footer-brand {
    display: flex;
    align-items: center;
    color: var(--ash);
}

.tl-logo-footer {
    height: 9px;
    width: auto;
    fill: currentColor;
}

.tl-footer-links {
    list-style: none;
    display: flex;
    gap: 20px;
}

.tl-footer-links a {
    color: var(--dim);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    transition: color 0.2s;
}

.tl-footer-links a:hover {
    color: var(--text);
}

.tl-footer-copy {
    letter-spacing: 0.06em;
}

/* === SCROLLBAR === */
::-webkit-scrollbar { width: 0; height: 0; }
* { scrollbar-width: none; }