@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@300..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap');

:root {
    --layout-inline: clamp(16px, 4vw, 32px);

    --bg: #fdf6ec;
    --surface: #fff8ee;
    --surface-2: #fcecd4;
    --card: #ffffff;

    --primary: #ffb347;
    --primary-strong: #f59e0b;
    --teal: #2dd4bf;
    --teal-strong: #14b8a6;
    --teal-soft: #ccfbf1;
    --red: #fb7185;
    --red-soft: #ffe4e6;
    --blue: #60a5fa;
    --blue-soft: #dbeafe;
    --green: #34d399;
    --green-soft: #d1fae5;
    --orange-soft: #ffedd5;
    --pink: #f472b6;
    --pink-soft: #fce7f3;
    --purple: #a78bfa;
    --purple-soft: #ede9fe;

    --text: #1e293b;
    --text-muted: #64748b;
    --text-soft: #94a3b8;
    --border: rgba(30, 41, 59, 0.08);

    --shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.08);
    --shadow-pop: 0 8px 24px rgba(0, 0, 0, 0.1);

    --radius-sm: 14px;
    --radius-md: 20px;
    --radius-lg: 28px;
    --radius-xl: 36px;
    --radius-pill: 999px;

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 32px;

    --bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

    --title-font: "Fredoka", "Comic Neue", ui-rounded, system-ui, sans-serif;
    --text-font: "Quicksand", "Nunito", sans-serif;

    /* Type scale (rem) */
    --text-2xs: 0.76rem;
    --text-xs: 0.875rem;
    --text-sm: 1rem;
    --text-md: 1.0625rem;
    --text-base: 1.125rem;
    --text-lg: 1.1875rem;
    --text-xl: 1.25rem;

    --font-weight-regular: 400;
    --font-weight-medium: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;

    --col-1: var(--red);
    --col-1-soft: var(--red-soft);
    --col-2: var(--primary);
    --col-2-soft: var(--orange-soft);
    --col-3: var(--green);
    --col-3-soft: var(--green-soft);
    --col-4: var(--blue);
    --col-4-soft: var(--blue-soft);
    --col-5: var(--purple);
    --col-5-soft: var(--purple-soft);

    /* Event categories (shared across days) */
    --evt-excursion: var(--purple);
    --evt-excursion-soft: var(--purple-soft);
    --evt-tasks: var(--teal-strong);
    --evt-tasks-soft: var(--teal-soft);
    --evt-test: var(--red);
    --evt-test-soft: var(--red-soft);
}