/**
 * HİSSİYAD Design System v1 — Component Styles
 * Standardized buttons, inputs, cards, badges, toasts, modals.
 * Uses design tokens. Does NOT override existing component styles —
 * uses .ds- prefix namespace to avoid collision.
 */

/* ── Buttons ── */
.ds-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-full);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    line-height: 1;
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-out);
    border: 1.5px solid transparent;
    text-decoration: none;
}

.ds-btn-primary {
    background: var(--color-primary);
    color: var(--color-text-inverse);
    border-color: var(--color-primary);
}
.ds-btn-primary:hover {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.ds-btn-secondary {
    background: transparent;
    color: var(--color-primary);
    border-color: var(--color-primary);
}
.ds-btn-secondary:hover {
    background: var(--color-primary-subtle);
}

.ds-btn-ghost {
    background: transparent;
    color: var(--color-text-secondary);
    border-color: transparent;
}
.ds-btn-ghost:hover {
    background: var(--color-primary-subtle);
    color: var(--color-text);
}

.ds-btn-destructive {
    background: var(--color-error);
    color: var(--color-text-inverse);
    border-color: var(--color-error);
}
.ds-btn-destructive:hover {
    background: #B71C1C;
}

.ds-btn-sm { padding: var(--space-2) var(--space-4); font-size: var(--text-xs); }
.ds-btn-lg { padding: var(--space-4) var(--space-8); font-size: var(--text-md); }

/* ── Inputs ── */
.ds-input {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    color: var(--color-text);
    background: var(--color-surface);
    transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}
.ds-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-subtle);
}
.ds-input::placeholder { color: var(--color-text-tertiary); }

.ds-textarea { min-height: 100px; resize: vertical; }

.ds-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236B6560' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}

/* ── Cards ── */
.ds-card {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: box-shadow var(--duration-normal) var(--ease-out), transform var(--duration-normal) var(--ease-out);
}
.ds-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.ds-card-body { padding: var(--space-5); }
.ds-card-header { padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-border-light); }
.ds-card-footer { padding: var(--space-3) var(--space-5); border-top: 1px solid var(--color-border-light); }

/* ── Badges & Chips ── */
.ds-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px var(--space-2);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    line-height: 1.4;
}
.ds-badge-primary { background: var(--color-primary-light); color: var(--hissiyad-terra); }
.ds-badge-success { background: var(--color-success-light); color: var(--color-success); }
.ds-badge-warning { background: var(--color-warning-light); color: var(--color-warning); }
.ds-badge-error { background: var(--color-error-light); color: var(--color-error); }
.ds-badge-info { background: var(--color-info-light); color: var(--color-info); }
.ds-badge-neutral { background: var(--hissiyad-paper); color: var(--color-text-secondary); }

.ds-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    background: var(--color-surface);
    transition: all var(--duration-fast);
}
.ds-chip:hover { border-color: var(--color-primary); color: var(--color-primary); }

/* ── Toast ── */
.ds-toast {
    position: fixed;
    bottom: calc(var(--nav-height) + var(--space-4));
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--hissiyad-dark);
    color: var(--hissiyad-cream);
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    box-shadow: var(--shadow-lg);
    z-index: var(--z-toast);
    opacity: 0;
    transition: all var(--duration-normal) var(--ease-spring);
    pointer-events: none;
}
.ds-toast.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

/* ── Skeleton Loading ── */
.ds-skeleton {
    background: linear-gradient(90deg, var(--hissiyad-paper) 25%, var(--color-border-light) 50%, var(--hissiyad-paper) 75%);
    background-size: 200% 100%;
    animation: ds-shimmer 1.5s infinite ease-in-out;
    border-radius: var(--radius-sm);
}
@keyframes ds-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

.ds-skeleton-text { height: 14px; margin-bottom: 8px; }
.ds-skeleton-text:last-child { width: 60%; }
.ds-skeleton-avatar { width: 40px; height: 40px; border-radius: 50%; }
.ds-skeleton-card { height: 200px; border-radius: var(--radius-lg); }

/* ── Empty State ── */
.ds-empty {
    text-align: center;
    padding: var(--space-12) var(--space-6);
    color: var(--color-text-tertiary);
}
.ds-empty-icon { font-size: 3rem; margin-bottom: var(--space-4); opacity: 0.5; }
.ds-empty-title { font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--color-text-secondary); margin-bottom: var(--space-2); }
.ds-empty-desc { font-size: var(--text-sm); max-width: 320px; margin: 0 auto; line-height: var(--leading-relaxed); }

/* ── A11Y: Focus Visible ── */
*:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Remove default outline for mouse clicks, keep for keyboard */
*:focus:not(:focus-visible) {
    outline: none;
}

/* ── A11Y: Minimum Tap Targets (mobile) ── */
@media (pointer: coarse) {
    a, button, [role="button"], input[type="submit"], input[type="button"],
    .ds-btn, .ds-chip, .ds-badge {
        min-height: 44px;
        min-width: 44px;
    }

    input[type="checkbox"], input[type="radio"] {
        min-height: 24px;
        min-width: 24px;
    }
}

/* ── A11Y: Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* ── A11Y: High Contrast Text Utility ── */
.ds-text-high-contrast {
    color: var(--color-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ── Form Validation States ── */
.ds-input-error,
.ds-input.is-invalid,
.form-input.is-invalid {
    border-color: var(--color-error) !important;
    box-shadow: 0 0 0 3px var(--color-error-light);
}

.ds-input-success,
.ds-input.is-valid,
.form-input.is-valid {
    border-color: var(--color-success) !important;
    box-shadow: 0 0 0 3px var(--color-success-light);
}

.ds-error-text {
    color: var(--color-error);
    font-size: var(--text-xs);
    margin-top: var(--space-1);
}