/* ========================================
 * OFFICE COMPONENT TOKENS
 * Used by: Web.Office ONLY
 * References semantic tokens from office-tokens.css
 * ======================================== */

:root {
    /* Button component */
    --button-padding-y: 10px;
    --button-padding-x: 20px;
    --button-radius: var(--office-radius);
    --button-bg: var(--office-primary);
    --button-bg-hover: var(--office-primary-hover);
    --button-text: var(--color-white);
    --button-shadow: var(--office-shadow-sm);
    --button-shadow-hover: var(--office-shadow-md);
    --button-font-size: var(--text-sm);
    --button-font-weight: 500;

    /* Input component */
    --input-padding-y: 10px;
    --input-padding-x: 12px;
    --input-border: var(--office-border);
    --input-border-focus: var(--office-border-focus);
    --input-radius: var(--office-radius);
    --input-bg: var(--office-surface);
    --input-text: var(--office-text);
    --input-font-size: var(--text-sm);

    /* Card/Panel component */
    --card-padding: var(--office-space-lg);
    --card-radius: var(--office-radius-lg);
    --card-border: var(--office-border);
    --card-bg: var(--office-surface);
    --card-shadow: var(--office-shadow-sm);
    --card-shadow-hover: var(--office-shadow-md);

    /* Focus glow */
    --focus-glow-color: rgba(37, 99, 235, 0.1);
    --focus-glow-spread: 3px;
}

/* ========================================
 * ACCESSIBILITY: Reduced Motion
 * Respects user OS-level preference to minimize animations
 * ======================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}