/* Design Tokens from DESIGN.md mapped to CSS Variables (Starbucks-Inspired) */
:root {
    --color-primary: #006241;
    /* Starbucks Green */
    --color-primary-glow: rgba(0, 98, 65, 0.15);
    --color-green-accent: #00754A;
    /* Green Accent */
    --color-house-green: #1E3932;
    /* Deep near-black green */
    --color-secondary: #f2f0eb;
    /* Neutral Warm Canvas */
    --color-surface: #ffffff;
    /* White card/modal surface */
    --color-ceramic: #edebe9;
    /* Ceramic Warm Separator */
    --color-gold: #cba258;
    /* Rewards Gold Accent */
    --color-gold-lightest: #faf6ee;
    /* Light Cream Gold */
    --color-text-primary: rgba(0, 0, 0, 0.87);
    /* Warm Text Black */
    --color-text-muted: rgba(0, 0, 0, 0.58);
    /* Warm Text Gray */
    --color-success: #00754A;
    /* Ready for Work */
    --color-success-bg: rgba(0, 117, 74, 0.08);
    --color-danger: #c82014;
    /* Already Hired */
    --color-danger-bg: rgba(200, 32, 20, 0.08);
    --color-border: rgba(0, 0, 0, 0.08);

    --font-family: 'Inter', sans-serif;
    --font-family-script: 'Inter', sans-serif;
    --font-family-serif: 'Lora', Georgia, serif;

    --rounded-card: 12px;
    --rounded-button: 50px;
    /* Full Pill */
    --rounded-badge: 9999px;

    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 40px;

    --effects-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --effects-shadow: 0px 0px 0.5px rgba(0, 0, 0, 0.14), 0px 1px 1px rgba(0, 0, 0, 0.24);
}

/* Telegram Mini App Theme parameters override hooks */
body.tma-mode {
    --color-secondary: var(--tg-theme-bg-color, #f2f0eb);
    --color-surface: var(--tg-theme-secondary-bg-color, #ffffff);
    --color-text-primary: var(--tg-theme-text-color, rgba(0, 0, 0, 0.87));
    --color-text-muted: var(--tg-theme-hint-color, rgba(0, 0, 0, 0.58));
    --color-green-accent: var(--tg-theme-button-color, #00754A);
    --color-border: var(--tg-theme-hint-color, rgba(0, 0, 0, 0.08));
}