/* ====================================================================================
Davila Divine Nails — base.css
Foundation styles: tokens, layout, typography, components
==================================================================================== */

/* ---------- Design Tokens ---------- */
:root{
    /* Brand */
    --brand:    #ff4de3;
    --brand-2:  #b56bff;

    /* Dark theme (default) */
    --bg:       #0b0c10;
    --surface:  #0f1118;
    --surface-2:#141827;

    --fg:       #eef0ff;
    --fg-muted: rgba(238,240,255,.72);

    --line:     rgba(255,255,255,.10);
    --shadow:   0 14px 40px rgba(0,0,0,.28);

    --radius:   18px;
    --radius-lg:22px;

    --max:      1100px;
}

/* Light theme */
:root[data-theme="light"]{
    --bg:       #fbfbfe;
    --surface:  #ffffff;
    --surface-2:#f4f5fb;

    --fg:       #121427;
    --fg-muted: rgba(18,20,39,.70);

    --line:     rgba(18,20,39,.12);
    --shadow:   0 14px 40px rgba(18,20,39,.12);
}

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

html{ scroll-behavior: smooth; }

html, body{
    max-width: 100%;
    overflow-x: hidden;
}


body{
    margin: 0;
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
    line-height: 1.55;
    color: var(--fg);
    background: var(--bg);
    text-rendering: optimizeLegibility;
}

img{ max-width: 100%; display: block; }

a{ color: inherit; }

::selection{
    background: rgba(255, 77, 227, .35);
}

/* ---------- Typography ---------- */
h1,h2,h3{
    line-height: 1.15;
    margin: 0 0 .6rem;
    letter-spacing: -.01em;
}

p{ margin: 0 0 1rem; color: var(--fg); }

.muted{ color: var(--fg-muted); }
.small{ font-size: .92rem; }
.kicker{
    color: var(--fg-muted);
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: .8rem;
}

/* ---------- Layout ---------- */
.container{
    width: min(var(--max), calc(100% - 2rem));
    margin-inline: auto;
}

.section{
    padding: clamp(2rem, 5vw, 4rem) 0;
}

.page{
    padding: clamp(2rem, 5vw, 4rem) 0;
}

.hr{
    border: 0;
    border-top: 1px solid var(--line);
    margin: 2rem 0;
}

/* Decorative glow helper */
.page-bg{
    position: relative;
}
.page-bg::before{
    content:"";
    position:absolute;
    inset:-10rem -10rem auto -10rem;
    height:520px;
    background: radial-gradient(closest-side, rgba(255, 77, 227, .18), rgba(0,0,0,0));
    filter: blur(10px);
    pointer-events:none;
    z-index:-1;
}

/* ---------- Buttons ---------- */
.btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .75rem 1rem;
    border-radius: 999px;
    text-decoration: none;
    border: 1px solid transparent;
    background: var(--brand);
    color: #fff;
    font-weight: 700;
    letter-spacing: .01em;
    cursor: pointer;
    transition: transform .08s ease, background .15s ease, border-color .15s ease;
}
.btn:hover{ background: var(--brand-2); }
.btn:active{ transform: translateY(1px); }

.btn-outline{
    background: transparent;
    border-color: var(--line);
    color: var(--fg);
}
.btn-outline:hover{ background: rgba(255,255,255,.06); }

.btn-ghost{
    background: transparent;
    border-color: transparent;
    color: var(--fg);
}
.btn-ghost:hover{ background: rgba(255,255,255,.06); }

/* ---------- Cards ---------- */
.card{
    background: rgba(255,255,255,.03);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.25rem;
    box-shadow: var(--shadow);
}

:root[data-theme="light"] .card{
    background: var(--surface);
}

.card.soft{
    background: rgba(255,255,255,.02);
    box-shadow: none;
}

/* ---------- Grid ---------- */
.grid{
    display: grid;
    gap: 1rem;
}

.grid-2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-3{
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 900px){
    .grid-2, .grid-3{ grid-template-columns: 1fr; }
}

/* ---------- Lists ---------- */
.bullets{
    margin: .75rem 0 0;
    padding-left: 1.2rem;
    color: var(--fg-muted);
}
.bullets li{ margin: .25rem 0; }

/* ---------- Links ---------- */
.text-link{
    color: var(--brand);
    text-decoration: none;
    font-weight: 700;
}
.text-link:hover{
    color: var(--brand-2);
    text-decoration: underline;
}

/* ---------- Forms ---------- */
input, textarea, select, button{
    font: inherit;
}

.field{
    display: grid;
    gap: .35rem;
    margin-bottom: .9rem;
}

label{
    font-weight: 700;
    font-size: .9rem;
}

input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select{
    width: 100%;
    padding: .75rem .9rem;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: rgba(255,255,255,.03);
    color: var(--fg);
    outline: none;
}

:root[data-theme="light"] input[type="text"],
:root[data-theme="light"] input[type="email"],
:root[data-theme="light"] input[type="tel"],
:root[data-theme="light"] textarea,
:root[data-theme="light"] select{
    background: var(--surface);
}

textarea{ min-height: 130px; resize: vertical; }

input:focus, textarea:focus, select:focus{
    border-color: rgba(255, 77, 227, .65);
    box-shadow: 0 0 0 4px rgba(255, 77, 227, .15);
}

.help{
    color: var(--fg-muted);
    font-size: .9rem;
}

.alert{
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: .9rem 1rem;
    background: rgba(255,255,255,.03);
}

.alert.success{ border-color: rgba(70, 220, 140, .35); }
.alert.error{ border-color: rgba(255, 90, 90, .35); }

/* ---------- Accessibility ---------- */
.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){
    html{ scroll-behavior: auto; }
    *{ transition: none !important; }
}

html, body{ height: 100%; }

body{
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main{
    flex: 1;
}

.breadcrumbs{
    width: min(var(--max), calc(100% - 2rem));
    margin: .75rem auto 0;
    color: var(--fg-muted);
    font-size: .92rem;
}
.breadcrumbs a{
    color: inherit;
    text-decoration: none;
    padding: .15rem .25rem;
    border-radius: 8px;
}
.breadcrumbs a:hover{
    color: var(--fg);
    background: rgba(255,255,255,.05);
}
.breadcrumbs .sep{
    margin: 0 .35rem;
    opacity: .5;
}