/* TIZION design system: shared tokens, controls and motion */
:root {
    color-scheme: light;
    --font-sans: "Segoe UI", Inter, Arial, Helvetica, sans-serif;

    --brand: #d5202a;
    --brand-strong: #aa151f;
    --brand-deep: #760d15;
    --brand-soft: #fff1f2;
    --brand-tint: #ffe4e6;

    --ink: #17181c;
    --ink-soft: #30343b;
    --muted: #667085;
    --muted-2: #98a2b3;
    --line: #e4e7ec;
    --line-strong: #cfd4dc;
    --canvas: #f3f5f8;
    --canvas-2: #edf0f4;
    --panel: #ffffff;
    --panel-soft: #f9fafb;
    --success: #0f766e;
    --warning: #a15c07;

    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius: 8px;
    --shadow-xs: 0 1px 2px rgba(16, 24, 40, .06);
    --shadow-sm: 0 8px 22px rgba(16, 24, 40, .08);
    --shadow-md: 0 16px 44px rgba(16, 24, 40, .12);
    --shadow-lg: 0 24px 70px rgba(16, 24, 40, .14);
    --glass: rgba(255, 255, 255, .78);
    --glass-strong: rgba(255, 255, 255, .92);
    --red-glow: 0 18px 42px rgba(213, 32, 42, .22);
    --focus: 0 0 0 4px rgba(213, 32, 42, .16);
    --ease: 160ms cubic-bezier(.2, .8, .2, 1);
    --ease-long: 760ms cubic-bezier(.16, 1, .3, 1);
}

* { box-sizing: border-box; }
html { background: var(--canvas); }
body {
    position: relative;
    overflow-x: hidden;
    font-family: var(--font-sans);
    color: var(--ink);
    margin: 0;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

body::before,
body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
}

body::before {
    z-index: 0;
    background:
        linear-gradient(90deg, rgba(213, 32, 42, .032) 1px, transparent 1px),
        linear-gradient(180deg, rgba(23, 24, 28, .032) 1px, transparent 1px),
        linear-gradient(115deg, transparent 0 38%, rgba(213, 32, 42, .038) 38% 38.18%, transparent 38.18%),
        linear-gradient(165deg, transparent 0 63%, rgba(23, 24, 28, .032) 63% 63.14%, transparent 63.14%);
    background-size: 64px 64px, 64px 64px, 980px 980px, 1180px 1180px;
    opacity: .58;
    animation: tizion-grid-drift 42s linear infinite;
}

body::after {
    display: none;
    z-index: 0;
    width: 42vw;
    min-width: 420px;
    left: -26vw;
    background: linear-gradient(90deg, transparent, rgba(213, 32, 42, .08), rgba(255, 255, 255, .18), transparent);
    transform: skewX(-16deg);
    filter: blur(1px);
    animation: tizion-light-sweep 12s ease-in-out infinite;
}

body > * {
    position: relative;
    z-index: 1;
}

button,
input,
select,
textarea {
    font: inherit;
}

input,
select,
textarea {
    color: var(--ink);
    background: var(--panel);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    transition: border-color var(--ease), box-shadow var(--ease), background var(--ease);
}

input:hover,
select:hover,
textarea:hover {
    border-color: #b8c0cc;
}

input:focus,
select:focus,
textarea:focus {
    outline: 0;
    border-color: var(--brand);
    box-shadow: var(--focus);
}

button {
    border-radius: var(--radius-sm);
    transition: transform var(--ease), box-shadow var(--ease), background var(--ease), border-color var(--ease), color var(--ease);
}

button:not(:disabled):hover {
    transform: translateY(-1px);
}

button:disabled {
    cursor: default;
    opacity: .68;
}

::selection {
    background: var(--brand-tint);
    color: var(--brand-deep);
}

@keyframes tizion-grid-drift {
    from { background-position: 0 0, 0 0, 0 0, 0 0; }
    to { background-position: 56px 56px, 56px 56px, 180px -180px, -220px 220px; }
}

@keyframes tizion-light-sweep {
    0%, 18% { transform: translateX(0) skewX(-16deg); opacity: 0; }
    38% { opacity: .72; }
    62%, 100% { transform: translateX(160vw) skewX(-16deg); opacity: 0; }
}

@keyframes tizion-float {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(-1deg); }
    50% { transform: translate3d(0, -10px, 0) rotate(1deg); }
}

@keyframes tizion-panel-drift {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(2deg); }
    50% { transform: translate3d(-12px, 9px, 0) rotate(-1deg); }
}

@keyframes tizion-shimmer {
    from { transform: translateX(-120%) skewX(-18deg); }
    to { transform: translateX(220%) skewX(-18deg); }
}

@keyframes tizion-rise-in {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes tizion-pop {
    from { opacity: 0; transform: translateY(-4px) scale(.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

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