/**
 * GTPlay - Semantic Variables
 *
 * Maps Astra global colors to semantic variable names for consistency and easier maintenance.
 *
 * @package GTPlay Astra Child
 * @since 1.0.0
 */

:root {
    /* --- Brand Colors --- */
    --gtplay-primary: var(--ast-global-color-0);
    --gtplay-primary-hover: var(--ast-global-color-1);

    /* --- Surfaces & Backgrounds --- */
    --gtplay-bg-main: var(--ast-global-color-3);
    --gtplay-bg-surface: var(--ast-global-color-2);
    --gtplay-bg-element: rgba(0, 0, 0, 0.2);
    --gtplay-bg-element-hover: rgba(0, 0, 0, 0.3);

    /* --- Typography --- */
    --gtplay-text-primary: var(--ast-global-color-5);
    --gtplay-text-secondary: var(--ast-global-color-7);
    --gtplay-text-muted: var(--ast-global-color-8);
    
    /* 
     * Technical Shim: RGB values for contrast color (Ink).
     * Necessary because Astra only provides HEX values (e.g. #FFFFFF) which cannot be used 
     * inside rgba() for transparency. 
     * - Dark Mode: 255, 255, 255 (White)
     * - Light Mode: 0, 0, 0 (Black)
     */
    --gtplay-ink-rgb: 255, 255, 255; 

    --gtplay-text-placeholder: rgba(var(--gtplay-ink-rgb), 0.5);

    /* --- Borders --- */
    --gtplay-border-subtle: rgba(var(--gtplay-ink-rgb), 0.05);
    --gtplay-border-light: rgba(var(--gtplay-ink-rgb), 0.1);
    --gtplay-border-focus: var(--gtplay-primary);

    /* --- Layout & Effects --- */
    --gtplay-hover-bg: rgba(var(--gtplay-ink-rgb), 0.02);
    --gtplay-shadow-base: 0, 0, 0; /* For usage in rgba() */
    --gtplay-shadow-card: 0 4px 6px -1px rgba(var(--gtplay-shadow-base), 0.3);
    --gtplay-shadow-panel: -5px 0 25px rgba(var(--gtplay-shadow-base), 0.5);
    --gtplay-border-radius: 8px;
    --gtplay-border-radius-sm: 4px;

    /* --- Components Specific --- */
    --gtplay-tag-neutral-bg: #f0f0f0;
    --gtplay-tag-neutral-border: #dcdcdc;
    --gtplay-tag-neutral-text: #333333;
    --gtplay-tag-gradient-start: #6B7280;
    --gtplay-tag-gradient-end: #4B5563;
}