:root {
    --bg: #F2F1EB;
    --bg-alt: #EAE8DF;
    --card: rgba(255, 255, 255, 0.55);
    --card-strong: rgba(255, 255, 255, 0.75);
    --card-border: rgba(255, 255, 255, 0.7);
    --hairline: rgba(31, 42, 36, 0.06);
    --text: #1F2A24;
    --text2: #6B7872;
    --text3: #9AA39E;
    --accent: #7FA77E;
    --accent-soft: #C7D6BE;
    --accent-deep: #5C8A60;
    --accent-tint: rgba(127, 167, 126, 0.12);
    --danger: #C97B6E;
    --success: #7FA77E;
    --p1: #C97B6E;
    --p2: #D9B871;
    --p3: #7FA77E;
    --p0: #B0B5B0;
    --radius: 22px;
    --radius-sm: 14px;
    --radius-pill: 999px;
    --shadow: 0 8px 32px rgba(60, 80, 60, 0.08);
    --shadow-soft: 0 4px 16px rgba(60, 80, 60, 0.05);
    --touch: 48px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html { font-size: 16px; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
}

/* Decorative background blobs */
body::before,
body::after {
    content: "";
    position: fixed;
    border-radius: 50%;
    z-index: 0;
    pointer-events: none;
}

body::before {
    width: 380px;
    height: 380px;
    background: radial-gradient(circle, #C7D6BE 0%, transparent 70%);
    filter: blur(90px);
    opacity: 0.6;
    top: -140px;
    right: -120px;
}

body::after {
    width: 460px;
    height: 460px;
    background: radial-gradient(circle, #DDE5C9 0%, transparent 70%);
    filter: blur(90px);
    opacity: 0.5;
    bottom: -200px;
    left: -160px;
}

.blob {
    position: fixed;
    width: 280px;
    height: 280px;
    background: radial-gradient(circle, #B5C9A6 0%, transparent 70%);
    filter: blur(90px);
    border-radius: 50%;
    opacity: 0.25;
    top: 35%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 0;
    pointer-events: none;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}