/* ===========================
   BASE DESIGN SYSTEM
   Warm Grey + Soft Teal
   =========================== */

:root {
    /* Warm greys */
    --bg: #F5F4F2;
    --card-bg: #E8E6E3;
    --border: #D4D1CD;

    /* Text */
    --text: #5A5652;
    --text-light: #7A7672;

    /* Soft teal accent */
    --accent: #4FB7A4;
    --accent-hover: #3D9C8C;
    --accent-soft: #E0F4F1;

    /* Shape + shadow */
    --radius: 14px;
    --radius-sm: 10px;
    --shadow: 0 4px 12px rgba(0, 0, 0, 0.08);

    /* Spacing scale */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;

    --transition: 0.2s ease;
}

body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--text);
    font-family: "Inter", sans-serif;
    line-height: 1.5;
}

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

a:hover {
    color: var(--accent-hover);
}