/**
 * YADEMA Design System Integration for Account Templates
 * This file overrides Tailwind utility classes with YADEMA design tokens
 * to ensure full compliance with the design system.
 *
 * IMPORTANT: This file must be loaded AFTER variables.css
 * In templates use:
 *   <link rel="stylesheet" href="{% static 'theme/design-tokens/build/css/variables.css' %}">
 *   <link rel="stylesheet" href="{% static 'account/css/yadema-tokens.css' %}">
 *
 * Last Updated: 2025-11-01
 * Maintained By: YADEMA Development Team
 */

/* =============================================================================
   TYPOGRAPHY - Using YADEMA Typography Scale
   ============================================================================= */

/* Display & Headings */
.text-4xl {
    font-size: var(--typography-scale-heading-1-font-size) !important;
    line-height: var(--typography-scale-heading-1-line-height) !important;
    font-weight: var(--typography-scale-heading-1-font-weight) !important;
    letter-spacing: var(--typography-scale-heading-1-letter-spacing) !important;
}

.text-3xl {
    font-size: var(--typography-scale-heading-2-font-size) !important;
    line-height: var(--typography-scale-heading-2-line-height) !important;
    font-weight: var(--typography-scale-heading-2-font-weight) !important;
}

.text-2xl {
    font-size: var(--typography-scale-heading-3-font-size) !important;
    line-height: var(--typography-scale-heading-3-line-height) !important;
    font-weight: var(--typography-scale-heading-3-font-weight) !important;
}

.text-xl {
    font-size: var(--typography-scale-heading-4-font-size) !important;
    line-height: var(--typography-scale-heading-4-line-height) !important;
}

.text-lg {
    font-size: var(--typography-scale-body-large-font-size) !important;
    line-height: var(--typography-scale-body-large-line-height) !important;
}

.text-base {
    font-size: var(--typography-scale-body-font-size) !important;
    line-height: var(--typography-scale-body-line-height) !important;
    font-weight: var(--typography-scale-body-font-weight) !important;
}

.text-sm {
    font-size: var(--typography-scale-body-small-font-size) !important;
    line-height: var(--typography-scale-body-small-line-height) !important;
}

.text-xs {
    font-size: var(--typography-scale-caption-font-size) !important;
    line-height: var(--typography-scale-caption-line-height) !important;
}

/* Font Weights */
.font-bold {
    font-weight: var(--typography-font-weight-bold) !important;
}

.font-semibold {
    font-weight: var(--typography-font-weight-semibold) !important;
}

.font-medium {
    font-weight: var(--typography-font-weight-medium) !important;
}

.font-normal {
    font-weight: var(--typography-font-weight-regular) !important;
}

/* Font Family */
.font-sans {
    font-family: var(--typography-font-family-primary) !important;
}

/* =============================================================================
   COLORS - Using YADEMA Semantic Color Tokens
   ============================================================================= */

/* Text Colors */
.text-ink {
    color: var(--color-text-primary) !important;
}

.text-ink-muted {
    color: var(--color-text-secondary) !important;
}

.text-card-foreground {
    color: var(--color-text-primary) !important;
}

.text-cta {
    color: var(--color-brand-primary) !important;
}

.text-white {
    color: var(--color-text-inverse) !important;
}

/* Error/Destructive Text Colors */
.text-red-600,
.text-red-800 {
    color: var(--color-destructive-high) !important;
}

/* Background Colors */
.bg-white {
    background-color: var(--color-background-primary) !important;
}

.bg-bg-cream {
    background-color: var(--color-background-secondary) !important;
}

.bg-transparent {
    background-color: transparent !important;
}

/* Error/Destructive Backgrounds */
.bg-red-50 {
    background-color: var(--color-destructive-low) !important;
}

.bg-gray-50 {
    background-color: var(--color-background-tertiary) !important;
}

/* Gradient */
.bg-gradient-care {
    background: linear-gradient(135deg, var(--color-brand-primary) 0%, var(--color-brand-primary-dark) 100%) !important;
}

/* Border Colors */
.border-hairline {
    border-color: var(--color-border-default) !important;
}

.border-red-200 {
    border-color: var(--color-destructive-high) !important;
}

.border-cta {
    border-color: var(--color-brand-primary) !important;
}

/* Hover States */
.hover\:text-ink:hover {
    color: var(--color-text-primary) !important;
}

.hover\:text-cta\/80:hover {
    color: var(--color-interactive-hover) !important;
}

.hover\:bg-gray-50:hover {
    background-color: var(--color-background-tertiary) !important;
}

.hover\:bg-transparent:hover {
    background-color: transparent !important;
}

/* Focus States */
.focus\:ring-cta:focus {
    --tw-ring-color: var(--color-interactive-focus) !important;
}

.focus\:border-cta:focus {
    border-color: var(--color-brand-primary) !important;
}

.focus\:ring-2:focus {
    box-shadow: 0 0 0 var(--border-width-medium) var(--color-interactive-focus) !important;
}

/* =============================================================================
   SPACING - Using YADEMA Spacing Scale
   ============================================================================= */

/* Padding */
.p-3 {
    padding: var(--spacing-scale-3) !important;
}

.p-4 {
    padding: var(--spacing-scale-4) !important;
}

.p-6 {
    padding: var(--spacing-scale-6) !important;
}

.p-12 {
    padding: var(--spacing-scale-12) !important;
}

.px-3 {
    padding-left: var(--spacing-scale-3) !important;
    padding-right: var(--spacing-scale-3) !important;
}

.px-4 {
    padding-left: var(--spacing-scale-4) !important;
    padding-right: var(--spacing-scale-4) !important;
}

.px-6 {
    padding-left: var(--spacing-scale-6) !important;
    padding-right: var(--spacing-scale-6) !important;
}

.py-1 {
    padding-top: var(--spacing-scale-1) !important;
    padding-bottom: var(--spacing-scale-1) !important;
}

.py-2 {
    padding-top: var(--spacing-scale-2) !important;
    padding-bottom: var(--spacing-scale-2) !important;
}

.py-3 {
    padding-top: var(--spacing-scale-3) !important;
    padding-bottom: var(--spacing-scale-3) !important;
}

.py-24 {
    padding-top: var(--spacing-scale-24) !important;
    padding-bottom: var(--spacing-scale-24) !important;
}

.pt-4 {
    padding-top: var(--spacing-scale-4) !important;
}

.pt-6 {
    padding-top: var(--spacing-scale-6) !important;
}

.pt-8 {
    padding-top: var(--spacing-scale-8) !important;
}

.pb-6 {
    padding-bottom: var(--spacing-scale-6) !important;
}

.pb-8 {
    padding-bottom: var(--spacing-scale-8) !important;
}

/* Margin */
.mt-1 {
    margin-top: var(--spacing-scale-1) !important;
}

.mt-2 {
    margin-top: var(--spacing-scale-2) !important;
}

.mt-4 {
    margin-top: var(--spacing-scale-4) !important;
}

.mt-6 {
    margin-top: var(--spacing-scale-6) !important;
}

.mt-8 {
    margin-top: var(--spacing-scale-8) !important;
}

.mb-2 {
    margin-bottom: var(--spacing-scale-2) !important;
}

.mb-3 {
    margin-bottom: var(--spacing-scale-3) !important;
}

.mb-4 {
    margin-bottom: var(--spacing-scale-4) !important;
}

.mb-6 {
    margin-bottom: var(--spacing-scale-6) !important;
}

.mb-8 {
    margin-bottom: var(--spacing-scale-8) !important;
}

.mr-2 {
    margin-right: var(--spacing-scale-2) !important;
}

/* Gap */
.gap-2 {
    gap: var(--spacing-scale-2) !important;
}

.gap-6 {
    gap: var(--spacing-scale-6) !important;
}

/* Space Between */
.space-y-2 > :not([hidden]) ~ :not([hidden]) {
    margin-top: var(--spacing-scale-2) !important;
}

.space-y-3 > :not([hidden]) ~ :not([hidden]) {
    margin-top: var(--spacing-scale-3) !important;
}

.space-y-4 > :not([hidden]) ~ :not([hidden]) {
    margin-top: var(--spacing-scale-4) !important;
}

.space-y-6 > :not([hidden]) ~ :not([hidden]) {
    margin-top: var(--spacing-scale-6) !important;
}

/* =============================================================================
   BORDERS - Using YADEMA Border Tokens
   ============================================================================= */

.rounded-md {
    border-radius: var(--border-radius-md) !important;
}

.rounded-lg {
    border-radius: var(--border-radius-lg) !important;
}

.rounded-xl {
    border-radius: var(--border-radius-xl) !important;
}

.rounded-3xl {
    border-radius: var(--border-radius-3xl) !important;
}

.rounded-full {
    border-radius: var(--border-radius-full) !important;
}

.rounded-t-3xl {
    border-top-left-radius: var(--border-radius-3xl) !important;
    border-top-right-radius: var(--border-radius-3xl) !important;
}

.rounded-\[4px\] {
    border-radius: var(--border-radius-sm) !important;
}

.border {
    border-width: var(--border-width-thin) !important;
    border-style: solid;
}

.border-2 {
    border-width: var(--border-width-medium) !important;
}

/* =============================================================================
   BUTTON STYLES - YADEMA Compliant
   ============================================================================= */

/* Primary Button */
button.bg-gradient-care,
.btn-primary {
    background: linear-gradient(135deg, var(--color-brand-primary) 0%, var(--color-brand-primary-dark) 100%);
    color: var(--color-text-inverse);
    font-family: var(--typography-font-family-primary);
    font-size: var(--typography-scale-button-font-size);
    font-weight: var(--typography-font-weight-medium);
    line-height: var(--typography-scale-button-line-height);
    letter-spacing: var(--typography-letter-spacing-extra-loose);
    border-radius: var(--border-radius-md);
    border: none;
    min-height: 44px; /* WCAG AA Touch Target */
    min-width: 44px;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

button.bg-gradient-care:hover:not(:disabled),
.btn-primary:hover:not(:disabled) {
    background: linear-gradient(135deg, var(--color-interactive-hover) 0%, var(--color-brand-primary-dark) 100%);
    box-shadow: 0 4px 12px rgba(27, 100, 209, 0.2);
}

button.bg-gradient-care:focus-visible,
.btn-primary:focus-visible {
    outline: var(--border-width-medium) solid var(--color-interactive-focus);
    outline-offset: 2px;
}

button.bg-gradient-care:disabled,
.btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Secondary Button */
button.border-hairline,
.btn-secondary {
    background-color: var(--color-background-primary);
    color: var(--color-text-primary);
    border: var(--border-width-thin) solid var(--color-border-default);
    font-family: var(--typography-font-family-primary);
    font-size: var(--typography-scale-button-font-size);
    font-weight: var(--typography-font-weight-medium);
    border-radius: var(--border-radius-md);
    min-height: 44px;
    min-width: 44px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

button.border-hairline:hover:not(:disabled),
.btn-secondary:hover:not(:disabled) {
    background-color: var(--color-background-tertiary);
}

button.border-hairline:focus-visible,
.btn-secondary:focus-visible {
    outline: var(--border-width-medium) solid var(--color-interactive-focus);
    outline-offset: 2px;
}

/* =============================================================================
   FORM INPUTS - YADEMA Compliant
   ============================================================================= */

input[type="email"],
input[type="password"],
input[type="text"],
input[type="tel"],
textarea {
    font-family: var(--typography-font-family-primary);
    font-size: var(--typography-scale-body-font-size);
    line-height: var(--typography-scale-body-line-height);
    font-weight: var(--typography-font-weight-regular);
    color: var(--color-text-primary);
    background-color: var(--color-background-primary);
    border: var(--border-width-thin) solid var(--color-border-default);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-scale-3);
    min-height: 44px; /* WCAG AA Touch Target */
    transition: all 0.2s ease-in-out;
}

input[type="email"]:focus,
input[type="password"]:focus,
input[type="text"]:focus,
input[type="tel"]:focus,
textarea:focus,
input[type="email"]:focus-visible,
input[type="password"]:focus-visible,
input[type="text"]:focus-visible,
input[type="tel"]:focus-visible,
textarea:focus-visible {
    border-color: var(--color-brand-primary);
    outline: var(--border-width-medium) solid var(--color-interactive-focus);
    outline-offset: 2px;
}

input[type="email"]:disabled,
input[type="password"]:disabled,
input[type="text"]:disabled,
input[type="tel"]:disabled,
textarea:disabled {
    background-color: var(--color-background-tertiary);
    color: var(--color-text-disabled);
    cursor: not-allowed;
    opacity: 0.6;
}

input[type="email"]::placeholder,
input[type="password"]::placeholder,
input[type="text"]::placeholder,
input[type="tel"]::placeholder,
textarea::placeholder {
    color: var(--color-text-disabled);
}

/* Form Labels */
label {
    font-family: var(--typography-font-family-primary);
    font-size: var(--typography-scale-label-font-size);
    line-height: var(--typography-scale-label-line-height);
    font-weight: var(--typography-scale-label-font-weight);
    letter-spacing: var(--typography-scale-label-letter-spacing);
    color: var(--color-text-primary);
}

/* Checkbox */
input[type="checkbox"] {
    min-width: 16px;
    min-height: 16px;
    accent-color: var(--color-brand-primary);
}

input[type="checkbox"]:focus-visible {
    outline: var(--border-width-medium) solid var(--color-interactive-focus);
    outline-offset: 2px;
}

/* =============================================================================
   ACCESSIBILITY - WCAG AA Compliance
   ============================================================================= */

/* Ensure all interactive elements meet minimum touch target size */
a,
button,
input,
select,
textarea,
[role="button"],
[role="link"] {
    min-height: 44px;
}

/* Focus indicators must be visible */
*:focus-visible {
    outline: var(--border-width-medium) solid var(--color-interactive-focus);
    outline-offset: 2px;
}

/* Never remove outline without replacement */
*:focus {
    outline-width: var(--border-width-medium);
}

/* =============================================================================
   UTILITY OVERRIDES
   ============================================================================= */

/* Heights using YADEMA spacing */
.h-10 {
    height: var(--spacing-scale-10) !important;
}

.h-11 {
    height: 44px !important; /* WCAG minimum */
}

.h-12 {
    height: var(--spacing-scale-12) !important;
}

.h-16 {
    height: var(--spacing-scale-16) !important;
}

/* Widths */
.w-5 {
    width: var(--spacing-scale-5) !important;
}

.w-8 {
    width: var(--spacing-scale-8) !important;
}

.w-16 {
    width: var(--spacing-scale-16) !important;
}

/* Shadows */
.shadow-sm {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.shadow-soft {
    box-shadow: 0 2px 8px rgba(27, 100, 209, 0.08);
}

.shadow-card {
    box-shadow: 0 4px 12px rgba(27, 100, 209, 0.12);
}

/* Transitions */
.transition-colors {
    transition-property: color, background-color, border-color;
    transition-duration: 0.2s;
    transition-timing-function: ease-in-out;
}

.transition-all {
    transition-property: all;
    transition-duration: 0.2s;
    transition-timing-function: ease-in-out;
}

.duration-300 {
    transition-duration: 0.3s;
}

/* =============================================================================
   RESPONSIVE TYPOGRAPHY
   ============================================================================= */

@media (max-width: 767px) {
    .text-4xl {
        font-size: var(--typography-responsive-mobile-heading-1) !important;
    }

    .text-2xl {
        font-size: var(--typography-responsive-mobile-heading-2) !important;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .text-4xl {
        font-size: var(--typography-responsive-tablet-heading-1) !important;
    }

    .text-2xl {
        font-size: var(--typography-responsive-tablet-heading-2) !important;
    }
}