/**
 * Final Polish Styles - Sprint 10
 * Final visual polish, consistency, and refinements
 */

/* ============================================
   POLISHED INTERACTIVE ELEMENTS
   ============================================ */

.polished-interactive {
    transition: all 0.2s ease;
    cursor: pointer;

.polished-interactive:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(var(--color-bg-primary-rgb, 26, 26, 26), 0.15);

.polished-interactive:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(var(--color-bg-primary-rgb, 26, 26, 26), 0.1);

/* ============================================
   POLISHED BUTTONS
   ============================================ */

.polished-button {
    padding: 0.75rem 1.5rem;
    border-radius: calc(var(--radius-sm) * 1.5);
    font-weight: 600;
    transition: all 0.2s ease;
    border: none;
    cursor: pointer;

.polished-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(var(--color-bg-primary-rgb, 26, 26, 26), 0.15);

.polished-button:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(var(--color-bg-primary-rgb, 26, 26, 26), 0.1);

/* ============================================
   POLISHED INPUTS
   ============================================ */

.polished-input {
    padding: 0.75rem 1rem;
    border-radius: calc(var(--radius-sm) * 1.5);
    border: 1px solid var(--color-border, #444);
    transition: all 0.2s ease;
    font-size: 1rem;

.polished-input:focus {
    outline: none;
    border-color: var(--color-info, #4a90e2);
    box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.1);

.polished-input:invalid {
    border-color: var(--color-error, var(--color-error));

/* ============================================
   REDUCED MOTION
   ============================================ */

.reduced-motion *,
.reduced-motion *::before,
.reduced-motion *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;

/* ============================================
   ERROR STATES
   ============================================ */

[role="alert"] {
    padding: 1rem;
    border-radius: calc(var(--radius-sm) * 1.5);
    background: var(--color-error-bg, rgba(231, 76, 60, 0.1));
    border: 1px solid var(--color-error, var(--color-error));
    color: var(--color-error-text, var(--color-error));

[role="alert"]::before {
    content: "⚠️ ";
    margin-right: 0.5rem;

/* ============================================
   LOADING STATES
   ============================================ */

[aria-label="Loading..."] {
    position: relative;
    pointer-events: none;

[aria-label="Loading..."]::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(var(--spacing-lg) * 1.25);
    height: calc(var(--spacing-lg) * 1.25);
    margin: -var(--spacing-sm) 0 0 -var(--spacing-sm);
    border: 2px solid var(--color-border, #444);
    border-top-color: var(--color-info, #4a90e2);
    border-radius: var(--radius-full);
    animation: spin 0.6s linear infinite;

@keyframes spin {
    to { transform: rotate(360deg); }

/* ============================================
   CONSISTENCY IMPROVEMENTS
   ============================================ */

/* Consistent spacing */
.polished-spacing {
    margin: 1rem 0;

.polished-spacing-sm {
    margin: 0.5rem 0;

.polished-spacing-lg {
    margin: 2rem 0;

/* Consistent borders */
.polished-border {
    border: 1px solid var(--color-border, #444);
    border-radius: calc(var(--radius-sm) * 1.5);

/* Consistent shadows */
.polished-shadow {
    box-shadow: 0 2px 8px rgba(var(--color-bg-primary-rgb, 26, 26, 26), 0.1);

.polished-shadow-lg {
    box-shadow: 0 4px 16px rgba(var(--color-bg-primary-rgb, 26, 26, 26), 0.15);

/* ============================================
   FINAL TOUCHES
   ============================================ */

/* Smooth scrolling */
html {
    scroll-behavior: smooth;

/* Focus visible */
*:focus-visible {
    outline: 2px solid var(--color-info, #4a90e2);
    outline-offset: 2px;

/* Selection */
::selection {
    background: var(--color-info, #4a90e2);
    color: white;

/* ============================================
   PERFORMANCE OPTIMIZATIONS
   ============================================ */

/* GPU acceleration for animations */
[class*="animate"],
[class*="transition"] {
    will-change: transform, opacity;
    transform: translateZ(0);

/* ============================================
   ACCESSIBILITY ENHANCEMENTS
   ============================================ */

/* Skip link - Consolidated with accessibilityEnhancements.css */
/* Skip link styles are defined in accessibilityEnhancements.css to avoid conflicts */

}}}}}}}}}}}}}}}}}}}}}}}}}