/* ============================================================
   TOKENS — change these and the whole site updates
   ============================================================ */

:root {
    --font:         'Barlow', sans-serif;

    --size-xs:      0.75rem;
    --size-sm:      0.875rem;
    --size-base:    1rem;
    --size-lg:      1.25rem;
    --size-xl:      2rem;
    --size-2xl:     3rem;

    --weight-light:     300;
    --weight-regular:   400;
    --weight-medium:    500;
    --weight-semibold:  600;

    --space-xs:     0.5rem;
    --space-sm:     1rem;
    --space-md:     2rem;
    --space-lg:     4rem;
    --space-xl:     8rem;

    --radius:       4px;

    /* Light mode */
    --bg:           #ffffff;
    --bg-subtle:    #f5f5f5;
    --text:         #111111;
    --text-muted:   #888888;
    --border:       #e0e0e0;
    --accent:       #111111;
}

/* Dark mode — swaps tokens only, nothing else changes */
@media (prefers-color-scheme: dark) {
    :root {
        --bg:           #000000;
        --bg-subtle:    #1a1a1a;
        --text:         #f0f0f0;
        --text-muted:   #666666;
        --border:       #2a2a2a;
        --accent:       #f0f0f0;
    }
}

/* ============================================================
   RESET
   ============================================================ */

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

html {
    /* Smooth scroll for any anchor links */
    scroll-behavior: smooth;
}

body {
    font-family:        var(--font);
    font-size:          var(--size-base);
    font-weight:        var(--weight-light);
    line-height:        1.6;
    background-color:   var(--bg);
    color:              var(--text);

    /* Generous margins, centered, max width for readability */
    max-width:          860px;
    margin:             0 auto;
    padding:            var(--space-md);
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */

h1, h2, h3 {
    font-weight:    var(--weight-semibold);
    line-height:    1.2;
}

h1 { font-size: var(--size-2xl); }
h2 { font-size: var(--size-xl); }
h3 { font-size: var(--size-lg); }

p {
    font-size:      var(--size-base);
    font-weight:    var(--weight-light);
    color:          var(--text);
    max-width:      60ch;
}

a {
    color:              var(--text);
    text-decoration:    none;
}

a:hover {
    color: var(--text-muted);
}

/* ============================================================
   NAV — breadcrumb style
   fyi.vin / work / apexaiq
   ============================================================ */

nav {
    display:        flex;
    align-items:    center;
    gap:            var(--space-xs);
    padding:        var(--space-md) 0;
    font-size:      var(--size-sm);
    font-weight:    var(--weight-medium);
    border-bottom:  1px solid var(--border);
    margin-bottom:  var(--space-lg);
}

/* fyi.vin — always links home */
nav .nav-root {
    color:          var(--text);
    font-weight:    var(--weight-semibold);
}

nav .nav-root:hover {
    color: var(--text-muted);
}

/* the / separator */
nav .nav-sep {
    color:          var(--text-muted);
    font-weight:    var(--weight-light);
    user-select:    none;
}

/* current page segment — full opacity, not a link */
nav .nav-current {
    color: var(--text);
}

/* parent segments — muted, are links */
nav .nav-parent {
    color:      var(--text-muted);
}

nav .nav-parent:hover {
    color: var(--text);
}

/* ============================================================
   FOOTER
   ============================================================ */

footer {
    margin-top:     var(--space-xl);
    padding-top:    var(--space-md);
    border-top:     1px solid var(--border);
    font-size:      var(--size-xs);
    color:          var(--text-muted);
    display:        flex;
    justify-content: space-between;
    align-items:    center;
}

/* ============================================================
   UTILITY
   ============================================================ */

.muted {
    color: var(--text-muted);
}

.small {
    font-size: var(--size-sm);
}

/* ============================================================
   HOME
   ============================================================ */

.home-intro {
    display:        flex;
    align-items:    start;
    justify-content: space-between;
    gap:            var(--space-lg);
    margin-top:     var(--space-lg);
}

.home-text {
    display:    flex;
    flex-direction: column;
    gap:        var(--space-md);
}

.home-mission {
    font-size:      var(--size-lg);
    font-weight:    var(--weight-light);
    color:          var(--text-muted);
    max-width:      100%;
}

.home-sub {
    font-size:      var(--size-lg);
    font-weight:    var(--weight-light);
    line-height:    1.8;
    color:          var(--text);
    max-width:      100%;
}

/* the strikethrough correction */
.correction {
    position:           relative;
    text-decoration:    line-through;
    text-decoration-color: #e03030;
}

.correction-new {
    position:       absolute;
    top:            -1.3em;
    left:           -12.5%;
    color:          #e03030;
    font-size:      0.8em;
    font-weight:    var(--weight-semibold);
    font-family:    'Playwrite PE';
    font-style:     normal;
    transform:      rotate(-7deg);
    white-space:    nowrap;
}

/* home nav links */
.home-links {
    display:        flex;
    flex-direction: column;
    align-items:    flex-start;
    gap:            var(--space-xs);
    border:         none;
    margin:         0;
    padding:        0;
    font-size:      var(--size-lg);
    font-weight:    var(--weight-light);
}

.home-links a {
    color:      var(--text-muted);
    transition: color 0.15s ease;
}

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

.link-path {
    color:          var(--text);
    font-weight:    var(--weight-medium);
}

/* mobile */
@media (max-width: 600px) {
    .home-intro {
        flex-direction:     column;
        align-items:        flex-start;
    }
}

/* ============================================================
   TOOLTIP
   ============================================================ */

.tooltip {
    position:   relative;
    cursor:     default;
}

.tooltip-text {
    position:       absolute;
    bottom:         100%;
    left:           50%;
    transform:      translateX(-50%);
    background:     var(--text);
    color:          var(--bg);
    font-family:    var(--font);
    font-size:      var(--size-xs);
    font-weight:    var(--weight-regular);
    padding:        4px 10px;
    border-radius:  var(--radius);
    white-space:    nowrap;
    pointer-events: none;
    opacity:        0;
    transition:     opacity 0.5s ease;
}

.tooltip:hover .tooltip-text {
    opacity: 1;
}