:root{
--color-surface-default:#faf5ff;
--color-surface-card:#ffffff;
--color-accent-primary:#ec4899;
--color-accent-secondary:#f59e0b;
--color-accent-tertiary:#6ee7b7;
--color-text-primary:#4c1d95;
--color-text-secondary:#a78bfa;
--color-badge-alert:#dc2626;
--color-badge-alert-text:#ffffff;
--color-border-soft:#e9d5ff;

--font-heading:'Baloo 2','Nunito',Arial Rounded MT,sans-serif;
--font-body:'Nunito',Arial Rounded MT,sans-serif;

--text-xs:0.875rem;
--text-sm:1rem;
--text-md:1.25rem;
--text-lg:1.5rem;
--text-xl:2rem;
--text-xxl:2.5rem;

--space-1:4px;
--space-2:8px;
--space-3:16px;
--space-4:24px;
--space-5:32px;
--space-6:48px;

--radius-sm:8px;
--radius-md:16px;
--radius-lg:24px;
--radius-pill:999px;

--shadow-soft:0 10px 25px rgba(236,72,153,0.15);

--container-max:1200px;
--container-pad:clamp(16px,3vw,32px);
}

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

html,body{
height:100%;
}

body{
font-family:var(--font-body);
background:var(--color-surface-default);
color:var(--color-text-secondary);
line-height:1.6;
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
}

img,video,canvas,svg{
display:block;
max-width:100%;
height:auto;
}

button,input,textarea,select{
font:inherit;
color:inherit;
background:none;
border:none;
outline:none;
}

button{
cursor:pointer;
}

ul{
list-style:none !important;
padding:0;
margin:0;
}

a{
text-decoration:none;
color:inherit;
}

h1,h2,h3,h4,h5,h6{
font-family:var(--font-heading);
color:var(--color-text-primary);
font-weight:700;
line-height:1.2;
margin-bottom:var(--space-3);
}

h1{
font-size:clamp(1.8rem,4vw,2.5rem);
color:var(--color-accent-primary);
}

h2{
font-size:clamp(1.5rem,3.5vw,2rem);
color:var(--color-accent-primary);
}

h3{
font-size:clamp(1.25rem,3vw,1.5rem);
}

h4{
font-size:var(--text-md);
}

h5{
font-size:var(--text-sm);
}

h6{
font-size:var(--text-xs);
}

p{
font-size:var(--text-sm);
margin-bottom:var(--space-3);
}

blockquote{
margin-bottom:var(--space-3);
padding-left:var(--space-3);
border-left:4px solid var(--color-border-soft);
}

ul,ol{
margin-bottom:var(--space-3);
}

section{
margin-bottom:var(--space-6);
}

:focus-visible{
outline:2px solid var(--color-accent-primary);
outline-offset:2px;
}

.container{
width:100%;
max-width:var(--container-max);
margin-inline:auto;
padding-inline:var(--container-pad);
}

.surface-card{
background:var(--color-surface-card);
border-radius:var(--radius-lg);
box-shadow:var(--shadow-soft);
border:1px solid var(--color-border-soft);
}

.stack > * + *{
margin-top:var(--space-3);
}

.cluster{
display:flex;
flex-wrap:wrap;
gap:var(--space-3);
align-items:center;
}

.cluster > *{
min-width:0;
}

.flex{
display:flex;
gap:var(--space-3);
}

.flex-col{
flex-direction:column;
}

.flex-wrap{
flex-wrap:wrap;
}

.flex > *{
min-width:0;
}

.center{
display:flex;
align-items:center;
justify-content:center;
}

.btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:var(--space-2);
padding:12px 20px;
border-radius:var(--radius-pill);
font-weight:700;
font-family:var(--font-heading);
font-size:var(--text-sm);
transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.btn-primary{
background:var(--color-accent-primary);
color:#fff;
box-shadow:var(--shadow-soft);
}

.btn-secondary{
background:var(--color-accent-secondary);
color:#fff;
box-shadow:var(--shadow-soft);
}

.btn:hover{
transform:scale(1.05);
}

.badge{
display:inline-block;
padding:4px 10px;
border-radius:var(--radius-md);
font-size:var(--text-xs);
font-weight:700;
font-family:var(--font-heading);
}

.badge-alert{
background:var(--color-badge-alert);
color:var(--color-badge-alert-text);
}

.input{
width:100%;
padding:12px 14px;
border-radius:var(--radius-md);
border:1px solid var(--color-border-soft);
background:var(--color-surface-card);
}

.card{
padding:var(--space-4);
border-radius:var(--radius-lg);
background:var(--color-surface-card);
box-shadow:var(--shadow-soft);
border:1px solid var(--color-border-soft);
}

.card > *:last-child{
margin-bottom:0;
}

.nav-toggle{
display:flex;
flex-direction:column;
gap:4px;
}

.icon-btn{
display:inline-flex;
align-items:center;
justify-content:center;
width:48px;
height:48px;
border-radius:50%;
background:var(--color-accent-primary);
color:#fff;
}

.icon-btn:active{
transform:scale(.95);
}

.media{
border-radius:var(--radius-md);
overflow:hidden;
}

.footer,
.header,
.nav{
border-radius:var(--radius-lg);
background:var(--color-surface-card);
box-shadow:var(--shadow-soft);
border:1px solid var(--color-border-soft);
}

small{
font-size:var(--text-xs);
}

strong{
font-weight:700;
color:var(--color-text-primary);
}
html, body {
  overflow-x: clip;
  max-width: 100%;
}

img, video, svg {
  max-width: 100%;
  height: auto;
}