:root {
    /* Colors */
    --color-primary: #2F7D5A;
    --color-primary-light: #E6F2EC;
    --color-accent: #F59E0B;
    --color-background: #FAFAF8;
    --color-surface: #FFFFFF;
    --color-border-subtle: color-mix(in srgb, var(--color-border) 80%, transparent);
    --color-text-primary: #1F2933;
    --color-text-secondary: #6B7280;
    --color-border: #E5E7EB;
    --color-border-strong: color-mix(in srgb, var(--color-text-primary) 10%, var(--color-border));
    --color-surface-muted: color-mix(in srgb, var(--color-surface) 80%, var(--color-primary-light));
    --color-surface-strong: color-mix(in srgb, var(--color-surface) 90%, var(--color-primary-light));
    --color-overlay-strong: color-mix(in srgb, var(--color-text-primary) 8%, transparent);
    --color-overlay-xstrong: color-mix(in srgb, var(--color-text-primary) 12%, transparent);

    /* Spacing */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-7: 1.75rem;
    --space-8: 2rem;

    /* Radius */
    --radius-sm: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --radius-xl: 1.25rem;
    --radius-pill: 999px;

    /* Shadows */
    --shadow-xs: 0 2px 6px rgba(0, 0, 0, 0.04);
    --shadow-sm: 0 4px 10px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 10px 24px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.08);

    /* Typography */
    --font-family-base: 'Noto Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.85rem;
    --font-size-md: 1rem;
    --font-size-lg: 1.25rem;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* Gradients */
    --gradient-app: linear-gradient(135deg, var(--color-background), var(--color-primary-light));
    --gradient-emphasis: linear-gradient(135deg, var(--color-primary), var(--color-accent));
    --gradient-subtle: linear-gradient(90deg, var(--color-primary-light), color-mix(in srgb, var(--color-accent) 15%, var(--color-surface)));
    --gradient-pill: linear-gradient(90deg, color-mix(in srgb, var(--color-accent) 70%, var(--color-surface)), color-mix(in srgb, var(--color-primary) 20%, var(--color-surface)));
}