/* tyy.md — SpaceX-inspired tokens. Night / platinum-day. No accent. No shadow. No glow. */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap");

:root,
html[data-theme="night"] {
    --c-primary: #000000;
    --c-ink: #000000;
    --c-on-primary: #ffffff;
    --c-on-primary-mute: #f0f0fa;
    --c-night: #000000;
    --c-night-soft: #0a0a0a;
    --c-light: #ffffff;
    --c-cool: #f0f0fa;
    --c-hair-dark: #3a3a3f;
    --c-hair-light: #e0e0e8;
    --c-ink-mute: #5a5a5f;
    --c-hover: #141414;
    --c-fill: #ffffff;
    --c-on-fill: #000000;
    --c-mask: rgba(0, 0, 0, 0.62);
    --r-xs: 4px;
    --r-sm: 8px;
    --r-md: 16px;
    --r-pill: 32px;
    --r-full: 9999px;
    --s-xxs: 4px;
    --s-xs: 8px;
    --s-sm: 12px;
    --s-md: 16px;
    --s-lg: 18px;
    --s-xl: 24px;
    --s-xxl: 32px;
    --s-huge: 48px;
    --font: "Inter", "Arial Narrow", Arial, Verdana, sans-serif;
}

html[data-theme="day"] {
    --c-primary: #111113;
    --c-ink: #111113;
    --c-on-primary: #111113;
    --c-on-primary-mute: #3a3a3f;
    --c-night: #f0f0fa;
    --c-night-soft: #ffffff;
    --c-light: #ffffff;
    --c-cool: #f7f7fb;
    --c-hair-dark: #e0e0e8;
    --c-hair-light: #e0e0e8;
    --c-ink-mute: #5a5a5f;
    --c-hover: #ececf2;
    --c-fill: #111113;
    --c-on-fill: #ffffff;
    --c-mask: rgba(17, 17, 19, 0.28);
}

html, body {
    background: var(--c-night);
    color: var(--c-on-primary);
    font-family: var(--font);
    letter-spacing: 0.32px;
}

.tyy-shop {
    background: var(--c-cool);
    color: var(--c-ink);
}

.tyy-eyebrow {
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.96px;
    line-height: 2;
    text-transform: uppercase;
    color: var(--c-ink-mute);
}

.tyy-display {
    font-size: 48px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0.96px;
    text-transform: uppercase;
    margin: 0;
}

.tyy-btn,
.tyy-btn-ghost,
a.tyy-btn,
button.tyy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 18px 24px;
    border-radius: var(--r-pill);
    border: 1px solid var(--c-on-primary);
    background: transparent;
    color: var(--c-on-primary);
    font-family: var(--font);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.17px;
    line-height: 0.94;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
}

.tyy-shop .tyy-btn,
.tyy-btn-light {
    border-color: var(--c-ink);
    color: var(--c-ink);
    background: var(--c-light);
}

.tyy-btn-fill {
    background: var(--c-fill);
    border-color: var(--c-fill);
    color: var(--c-on-fill);
}

.tyy-input,
.tyy-shop input,
.tyy-shop textarea,
.tyy-shop select {
    background: var(--c-night-soft);
    color: var(--c-on-primary);
    border: 1px solid var(--c-hair-dark);
    border-radius: var(--r-xs);
    padding: 12px 16px;
    font-family: var(--font);
    font-size: 16px;
    min-height: 44px;
}

.tyy-card {
    background: var(--c-night-soft);
    color: var(--c-on-primary);
    border: 1px solid var(--c-hair-dark);
    border-radius: var(--r-sm);
    padding: 16px;
}

.tyy-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--c-night-soft);
    color: var(--c-on-primary);
}
.tyy-table th,
.tyy-table td {
    padding: 12px 16px;
    border: 1px solid var(--c-hair-dark);
    text-align: left;
    font-size: 16px;
}
.tyy-table th {
    background: var(--c-hover);
    text-transform: uppercase;
    letter-spacing: 0.96px;
    font-size: 12px;
    font-weight: 700;
}

.theme-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 50px;
    height: 32px;
    padding: 0 14px;
    border: 1px solid var(--c-on-primary);
    border-radius: var(--r-pill);
    background: transparent;
    color: var(--c-on-primary);
    font-family: var(--font);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.17px;
    cursor: pointer;
}

@media (max-width: 767px) {
    .tyy-display { font-size: 40px; letter-spacing: 0.8px; }
}