@charset "utf-8";

@layer reset, base, tokens, vendor, components, sections, utilities, overrides;

@layer reset {
    *, *::before, *::after { box-sizing: border-box; }
    :where(body, h1, h2, h3, h4, h5, h6, p, ul, ol, figure, dl, dd, input) { margin: 0; padding: 0; }
    :where(ul, ol) { list-style: none; }
    :where(address, em) { font-style: normal; }
    :where(svg:focus, svg *:focus) { outline: none; }
    a { color: inherit; text-decoration: none; }
    button { padding: 0; background: transparent; border: 0; cursor: pointer; }
    table { border-collapse: collapse; border-spacing: 0; }
    textarea { resize: vertical; }
    summary { cursor: pointer; }
    dialog { color: inherit; }
}

@layer base {
    * { letter-spacing: var(--letter-spacing-negative-10); outline-color: var(--color-primary); }
    
    html { font-size: 6.25%; scroll-padding-top: var(--spacing-17); -webkit-text-size-adjust: 100%; }
    
    /* Safari Nesting Fix untuk Media Query */
    @media (prefers-reduced-motion: no-preference) { 
        html { scroll-behavior: smooth; } 
    }
    
    /* Safari/iOS Selection Fix */
    html::-webkit-selection { color: var(--color-white, #fff); background: var(--color-primary, #3367d1); }
    html::selection { color: var(--color-white, #fff); background: var(--color-primary, #3367d1); }
    
    body { 
        position: relative; 
        font: var(--font-body-3); 
        overflow-wrap: break-word; 
        word-break: keep-all; 
        color: var(--color-black); 
        accent-color: var(--color-primary); 
    }
    
    :where(input, textarea, select, button) { 
        min-width: 0; 
        font: inherit; 
        color: inherit; 
        caret-color: var(--color-primary); 
        -webkit-tap-highlight-color: transparent; 
    }
}