:root {
    /* Primary Color: Green tone according to Shogi Deutschland */
    --primary-green: #2C7837;
    --primary-green-rgb: 44, 120, 55;
    --primary-green-light: #4A9C56;
    --primary-green-dark: #1E5225;

    /* Secondary Colors */
    --color-white: #ffffff;
    --color-off-white: #f5f5f5;
    --color-dark-gray: #333333;
    --color-black: #000000;

    /* UI Colors */
    --background-color: var(--color-white);
    --text-color: var(--color-dark-gray);
    --link-color: var(--primary-green);
    --link-hover-color: var(--primary-green-dark);

    /* Typography - Human Interface Guidelines inspired */
    --font-family-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    --font-size-base: 16px;
    --line-height-base: 1.5;

    /* Spacing */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;

    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;

    /* Transitions */
    --transition-speed: 0.3s;
    --transition-ease: ease-in-out;
}