/* ================================================================
   SIGMA - Base / Reset
   File 2 of 5: Normalize, body, typography, accessibility helpers.
   Depends on: sigma-tokens.css
   ================================================================ */

/* ----------------------------------------------------------------
   Box sizing
   ---------------------------------------------------------------- */
*, *::before, *::after {
    box-sizing: border-box;
}

/* ----------------------------------------------------------------
   Document / Body
   ---------------------------------------------------------------- */
html {
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
    background: var(--bg);
    min-height: 100%;
}

body {
    margin: 0;
    font-family: var(--font);
    font-size: var(--text-base);
    line-height: 1.6;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ----------------------------------------------------------------
   Links
   ---------------------------------------------------------------- */
a {
    color: var(--accent);
    text-decoration: none;
    transition: color var(--t-fast), opacity var(--t-fast);
}
a:hover {
    opacity: 0.82;
}

/* ----------------------------------------------------------------
   Headings
   ---------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
    margin: 0 0 0.5em;
    font-family: var(--font);
    font-weight: 700;
    line-height: 1.25;
    color: var(--text);
    letter-spacing: -0.015em;
}
h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }
h4 { font-size: var(--text-md); }
h5 { font-size: var(--text-base); }
h6 { font-size: var(--text-sm); }

/* Display headings use DM Serif Display */
.h-display,
.display-heading {
    font-family: var(--font-d);
    font-weight: 800;
    letter-spacing: -0.025em;
}

/* ----------------------------------------------------------------
   Paragraphs + lists
   ---------------------------------------------------------------- */
p {
    margin: 0 0 1em;
    line-height: 1.65;
}
p:last-child { margin-bottom: 0; }

ul, ol {
    padding-left: 1.5em;
    margin: 0 0 1em;
}
ul:last-child, ol:last-child { margin-bottom: 0; }

/* ----------------------------------------------------------------
   Inline elements
   ---------------------------------------------------------------- */
strong, b { font-weight: 700; }
em, i     { font-style: italic; }
small     { font-size: 0.875em; }

code, kbd, samp, pre {
    font-family: var(--font-mono);
    font-size: 0.85em;
}

code {
    background: var(--surface-sunken);
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    padding: 0.1em 0.35em;
    color: var(--accent);
}

pre {
    background: var(--surface-sunken);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 1rem;
    overflow-x: auto;
    line-height: 1.55;
    margin: 0 0 1em;
}
pre code {
    background: none;
    border: none;
    padding: 0;
    font-size: 1em;
    color: inherit;
}

/* ----------------------------------------------------------------
   Media
   ---------------------------------------------------------------- */
img, svg, video, canvas, audio, iframe {
    display: block;
    max-width: 100%;
    vertical-align: middle;
}
img { height: auto; }

/* Inline SVGs used as icons */
svg:not([class]) {
    overflow: visible;
}

/* ----------------------------------------------------------------
   Tabler Icons baseline - keeps <i class="ti ti-NAME"> sized and
   aligned to surrounding text. Color follows `color`, size follows
   `font-size`. Override per-context with the parent element.
   ---------------------------------------------------------------- */
.ti, .tif {
    display: inline-block;
    vertical-align: -0.125em;       /* visual centerline with text */
    line-height: 1;
    color: inherit;
}
.ti::before, .tif::before {
    display: inline-block;
}

/* ----------------------------------------------------------------
   Form element normalization
   ---------------------------------------------------------------- */
button, input, select, textarea, optgroup {
    font-family: var(--font);
    font-size: inherit;
    color: inherit;
    margin: 0;
}
button {
    cursor: pointer;
    border: none;
    background: none;
    padding: 0;
    /* line-height: 1; */
}
button:disabled { cursor: not-allowed; }
input, textarea, select {
    border: 1px solid var(--border);
    background: var(--surface);
    outline: none;
    border-radius: var(--radius-sm);
}
input::placeholder,
textarea::placeholder { color: var(--text-faint); }
select { appearance: none; -webkit-appearance: none; }
textarea { resize: vertical; }

/* ----------------------------------------------------------------
   HR / Divider
   ---------------------------------------------------------------- */
hr {
    border: none;
    height: 1px;
    background: var(--border);
    margin: var(--sp-6) 0;
}

/* ----------------------------------------------------------------
   Tables (normalize)
   ---------------------------------------------------------------- */
table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
}

/* ----------------------------------------------------------------
   Global focus ring (WCAG 2.1 AA)
   All interactive elements get a consistent accent outline.
   ---------------------------------------------------------------- */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
}
/* Remove focus ring when not using keyboard */
:focus:not(:focus-visible) {
    outline: none;
}

/* ----------------------------------------------------------------
   Scrollbar - slim, accent-aware
   ---------------------------------------------------------------- */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}
::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: var(--radius-full);
    transition: background var(--t-fast);
}
::-webkit-scrollbar-thumb:hover {
    background: var(--accent);
}
::-webkit-scrollbar-corner {
    background: transparent;
}

/* ----------------------------------------------------------------
   Accessibility: visually hidden
   ---------------------------------------------------------------- */
.sr-only,
.s-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

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

/* ----------------------------------------------------------------
   Typography utility classes
   ---------------------------------------------------------------- */
.s-title-xl {
    font-size: var(--text-2xl);
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.2;
    color: var(--text);
}
.s-title-lg {
    font-size: var(--text-xl);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.25;
    color: var(--text);
}
.s-title {
    font-size: var(--text-lg);
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.3;
    color: var(--text);
}
.s-title-sm {
    font-size: var(--text-md);
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.4;
    color: var(--text);
}
.s-label {
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.s-meta {
    font-size: var(--text-sm);
    color: var(--text-muted);
    line-height: 1.5;
}
.s-body {
    font-size: var(--text-base);
    line-height: 1.65;
    color: var(--text);
}
.s-code {
    font-family: var(--font-mono);
    font-size: 0.82em;
    background: var(--surface-sunken);
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    padding: 0.1em 0.35em;
    color: var(--accent);
}
.s-muted  { color: var(--text-muted); }
.s-faint  { color: var(--text-faint); }
.s-accent { color: var(--accent); }
.s-danger { color: var(--danger-text); }
.s-success { color: var(--success-text); }

/* Text utility */
.s-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Clamp helpers */
.clamp-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ----------------------------------------------------------------
   Layout utilities
   ---------------------------------------------------------------- */
.d-flex         { display: flex; }
.d-flex--center { display: flex; align-items: center; }
.d-flex--between { display: flex; align-items: center; justify-content: space-between; }
.gap-1 { gap: var(--sp-1); }
.gap-2 { gap: var(--sp-2); }
.gap-3 { gap: var(--sp-3); }
.gap-4 { gap: var(--sp-4); }
.mt-0  { margin-top: 0; }
.mb-0  { margin-bottom: 0; }

/* Text color helpers */
.text--muted   { color: var(--text-muted); }
.text--faint   { color: var(--text-faint); }
.text--accent  { color: var(--accent); }
.text--danger  { color: var(--danger-text); }
.text--success { color: var(--success-text); }

/* ----------------------------------------------------------------
   Theme icon visibility helpers
   data-theme-icon="sun" shows in dark mode, "moon" in light mode
   ---------------------------------------------------------------- */
[data-theme-icon="sun"]  { display: none; }
[data-theme-icon="moon"] { display: block; }
[data-theme="dark"] [data-theme-icon="sun"]  { display: block; }
[data-theme="dark"] [data-theme-icon="moon"] { display: none; }

/* ----------------------------------------------------------------
   Password visibility toggle
   sigma.js adds .is-visible when password is revealed
   ---------------------------------------------------------------- */
[data-password-toggle] .icon-on  { display: block; }
[data-password-toggle] .icon-off { display: none; }
[data-password-toggle].is-visible .icon-on  { display: none; }
[data-password-toggle].is-visible .icon-off { display: block; }

/* ----------------------------------------------------------------
   Shared keyframes used across files
   ---------------------------------------------------------------- */
/* ---- Sidebar entrance ---- */
@keyframes sidebar-item-in {
    from { opacity: 0; transform: translateX(-12px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes sidebar-sublink-in {
    from { opacity: 0; transform: translateX(-8px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* ---- Page transitions ---- */
@keyframes page-enter {
    from {
        opacity: 0;
        transform: translateX(18px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}
@keyframes page-exit {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(-12px);
    }
}
@keyframes page-fade-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes s-spin {
    to { transform: rotate(360deg); }
}
@keyframes s-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes s-fade-out {
    from { opacity: 1; }
    to   { opacity: 0; }
}
@keyframes s-shimmer {
    0%   { background-position: -400% 0; }
    100% { background-position:  400% 0; }
}
@keyframes modal-in {
    from { opacity: 0; transform: scale(0.96) translateY(10px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes modal-out {
    from { opacity: 1; transform: scale(1) translateY(0); }
    to   { opacity: 0; transform: scale(0.96) translateY(10px); }
}
@keyframes toast-in {
    from { opacity: 0; transform: translateX(110%); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes toast-out {
    from { opacity: 1; transform: translateX(0) scale(1); }
    to   { opacity: 0; transform: translateX(30%) scale(0.95); }
}
@keyframes toast-progress {
    from { transform: scaleX(1); }
    to   { transform: scaleX(0); }
}
@keyframes s-progress-stripe {
    from { background-position: 1rem 0; }
    to   { background-position: 0 0; }
}
@keyframes orb-drift-a {
    0%   { transform: translate(0,    0)    scale(1.00); }
    35%  { transform: translate(18px, 28px) scale(1.08); }
    70%  { transform: translate(8px,  50px) scale(0.96); }
    100% { transform: translate(24px, 30px) scale(1.04); }
}
@keyframes orb-drift-b {
    0%   { transform: translate(0,     0)     scale(1.00); }
    30%  { transform: translate(-22px,-18px)  scale(1.10); }
    65%  { transform: translate(-10px,-40px)  scale(0.94); }
    100% { transform: translate(-18px,-24px)  scale(1.06); }
}
@keyframes tooltip-pop {
    from { opacity: 0; transform: translateX(-4px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes badge-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.5; transform: scale(0.7); }
}
@keyframes prog-pulse {
    0%, 100% { opacity: 0.35; transform: scale(1); }
    50%       { opacity: 0;    transform: scale(1.5); }
}
@keyframes wizard-slide-in {
    from { opacity: 0; transform: translateX(1.5rem); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes wizard-slide-back {
    from { opacity: 0; transform: translateX(-1.5rem); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes ss-spin {
    to { transform: rotate(360deg); }
}
@keyframes tag-pop {
    from { opacity: 0; transform: scale(0.85); }
    to   { opacity: 1; transform: scale(1); }
}
@keyframes auth-rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes dialog-in {
    from { opacity: 0; transform: scale(0.94) translateY(-0.5rem); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes backdrop-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes alert-slide-in {
    from { opacity: 0; transform: translateY(-0.4rem); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
@keyframes skeleton-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.45; }
}

/* ----------------------------------------------------------------
   App root stacking context
   ---------------------------------------------------------------- */
.app-root { position: relative; z-index: 1; }

/* ── Aurora background blobs ───────────────────────────────── */
.app-bg-canvas {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}
.app-bg-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    will-change: transform;
    transform: translate3d(0,0,0);
}
.app-bg-blob--1 {
    width: 700px; height: 700px;
    top: -250px; right: -150px;
    background: radial-gradient(circle, var(--blob-1, rgba(34,217,124,0.14)) 0%, transparent 65%);
    animation: blob-drift-a 28s ease-in-out infinite alternate;
}
.app-bg-blob--2 {
    width: 550px; height: 550px;
    bottom: -180px; left: -80px;
    background: radial-gradient(circle, var(--blob-2, rgba(45,212,191,0.09)) 0%, transparent 65%);
    animation: blob-drift-b 36s ease-in-out infinite alternate;
    animation-delay: -14s;
}
.app-bg-blob--3 {
    width: 420px; height: 420px;
    top: 42%; left: 36%;
    background: radial-gradient(circle, var(--blob-3, rgba(34,217,124,0.055)) 0%, transparent 65%);
    animation: blob-drift-a 44s ease-in-out infinite alternate;
    animation-delay: -22s;
}
@keyframes blob-drift-a {
    from { transform: translate3d(0,0,0) scale(1); }
    to   { transform: translate3d(40px,30px,0) scale(1.08); }
}
@keyframes blob-drift-b {
    from { transform: translate3d(0,0,0) scale(1.04); }
    to   { transform: translate3d(-35px,-25px,0) scale(1); }
}

/* Sidebar ambient orb glow animation */
@keyframes glow-pulse {
    from { opacity: 0.7; }
    to   { opacity: 1.0; }
}