:root {
    --papaya-orange: #FF7A33;
    --amazon-green: #1E8C4A;
    --sky-blue: #6ECFF6;
    --concrete-beige: #E8DCC2;
    --deep-midnight: #0F1A26;

    --terracotta-700: #d85f24;
    --terracotta-500: var(--papaya-orange);
    --terracotta-300: #ffb082;
    --deep-green-800: #145f33;
    --deep-green-600: var(--amazon-green);
    --deep-green-400: #4cab72;

    --warm-ivory: #f6f0e2;
    --sand: var(--concrete-beige);
    --charcoal-ink: var(--deep-midnight);
    --muted-stone: #5f665f;
    --gold-accent: var(--sky-blue);

    --surface-1: #fffaf2;
    --surface-2: #f0e6d2;

    --bg-canvas: #f6f0e2;
    --bg-image-top-left: rgba(255, 122, 51, 0.1);
    --bg-image-top-right: rgba(30, 140, 74, 0.09);
    --bg-image-bottom-right: rgba(110, 207, 246, 0.1);
    --bg-image-wash: linear-gradient(130deg, rgba(232, 220, 194, 0.22), rgba(246, 240, 226, 0.98));
    --text-primary: var(--charcoal-ink);
    --text-secondary: rgba(29, 27, 25, 0.9);
    --header-bg: rgba(246, 241, 232, 0.93);
    --header-border: rgba(29, 27, 25, 0.12);
    --header-control-bg: rgba(255, 250, 242, 0.85);
    --header-control-border: rgba(29, 27, 25, 0.16);
    --header-control-text: var(--deep-green-800);
    --header-control-hover: rgba(110, 207, 246, 0.18);
    --surface-raised: linear-gradient(165deg, var(--surface-1), rgba(232, 220, 194, 0.7));
    --surface-panel: linear-gradient(165deg, var(--surface-1), rgba(232, 220, 194, 0.8));
    --surface-border: rgba(15, 26, 38, 0.12);
    --link-color: var(--amazon-green);
    --btn-secondary-text: var(--deep-midnight);
    --btn-secondary-bg: rgba(110, 207, 246, 0.14);
    --btn-secondary-border: var(--amazon-green);
    --btn-sandbox-bg: #4B2E2B;
    --btn-sandbox-hover: #3b2422;
    --btn-sandbox-text: #f6f0e2;
    --pill-bg: rgba(167, 119, 82, 0.28);
    --pill-text: rgba(40, 25, 16, 0.95);
    --pill-border: rgba(96, 63, 42, 0.45);
    --updates-line: rgba(30, 140, 74, 0.45);
    --field-bg: rgba(255, 252, 246, 0.95);
    --field-border: rgba(75, 46, 43, 0.45);
    --hero-blob: radial-gradient(circle at 28% 24%, rgba(126, 83, 53, 0.9), rgba(53, 33, 21, 0.75));
    --hero-art-bg: rgba(154, 122, 89, 0.72);
    --hero-art-border: rgba(88, 58, 39, 0.48);
    --hero-art-shadow: 0 18px 40px rgba(56, 35, 23, 0.26);
    --decor-orb-bg: radial-gradient(circle at 30% 30%, rgba(133, 90, 59, 0.5), rgba(35, 21, 14, 0.24));
    --decor-orb-border: rgba(58, 36, 24, 0.36);
    --decor-orb-small: radial-gradient(circle at 36% 30%, rgba(92, 60, 39, 0.34), rgba(29, 16, 10, 0.62));
    --footer-bg: var(--deep-green-800);
    --footer-text: var(--warm-ivory);
    color-scheme: light;

    --max-width: 72rem;
    --radius-sm: 0.5rem;
    --radius-md: 0.9rem;
    --radius-lg: 1.2rem;

    --space-1: 0.5rem;
    --space-2: 0.75rem;
    --space-3: 1rem;
    --space-4: 1.5rem;
    --space-5: 2rem;
    --space-6: 3rem;

    --shadow-sm: 0 6px 18px rgba(15, 26, 38, 0.11);
    --shadow-md: 0 18px 44px rgba(15, 26, 38, 0.16);

    --ease-artful: cubic-bezier(0.2, 0.65, 0.2, 1);
}

:root[data-theme="dark"] {
    --surface-1: #171a1d;
    --surface-2: #20252a;
    --bg-canvas: #0c0d0f;
    --bg-image-top-left: rgba(255, 122, 51, 0.18);
    --bg-image-top-right: rgba(30, 140, 74, 0.16);
    --bg-image-bottom-right: rgba(110, 207, 246, 0.14);
    --bg-image-wash: linear-gradient(130deg, rgba(12, 13, 15, 0.96), rgba(18, 20, 24, 0.98));
    --text-primary: #f5f1e8;
    --text-secondary: rgba(245, 241, 232, 0.78);
    --header-bg: rgba(12, 13, 15, 0.88);
    --header-border: rgba(246, 240, 226, 0.12);
    --header-control-bg: rgba(23, 26, 29, 0.92);
    --header-control-border: rgba(246, 240, 226, 0.14);
    --header-control-text: #f5f1e8;
    --header-control-hover: rgba(110, 207, 246, 0.12);
    --surface-raised: linear-gradient(165deg, rgba(23, 26, 29, 0.96), rgba(38, 42, 46, 0.92));
    --surface-panel: linear-gradient(165deg, rgba(23, 26, 29, 0.98), rgba(34, 38, 43, 0.94));
    --surface-border: rgba(246, 240, 226, 0.1);
    --link-color: #9fdcb7;
    --btn-secondary-text: #f5f1e8;
    --btn-secondary-bg: rgba(110, 207, 246, 0.12);
    --btn-secondary-border: #9fdcb7;
    --btn-sandbox-bg: #221513;
    --btn-sandbox-hover: #3a2521;
    --btn-sandbox-text: #fff8ef;
    --pill-bg: rgba(255, 176, 130, 0.14);
    --pill-text: #f5e8da;
    --pill-border: rgba(255, 176, 130, 0.28);
    --updates-line: rgba(159, 220, 183, 0.5);
    --field-bg: rgba(18, 20, 24, 0.96);
    --field-border: rgba(246, 240, 226, 0.18);
    --hero-blob: radial-gradient(circle at 28% 24%, rgba(255, 122, 51, 0.34), rgba(30, 140, 74, 0.22));
    --hero-art-bg: rgba(57, 43, 34, 0.68);
    --hero-art-border: rgba(255, 176, 130, 0.28);
    --hero-art-shadow: 0 18px 40px rgba(0, 0, 0, 0.34);
    --decor-orb-bg: radial-gradient(circle at 30% 30%, rgba(255, 122, 51, 0.2), rgba(110, 207, 246, 0.08));
    --decor-orb-border: rgba(255, 176, 130, 0.18);
    --decor-orb-small: radial-gradient(circle at 36% 30%, rgba(110, 207, 246, 0.18), rgba(15, 26, 38, 0.7));
    --footer-bg: #090a0c;
    --footer-text: #f5f1e8;
    --shadow-sm: 0 8px 22px rgba(0, 0, 0, 0.28);
    --shadow-md: 0 20px 48px rgba(0, 0, 0, 0.34);
    color-scheme: dark;
}