/* Google Fonts - Cairo (Arabic) and Montserrat (English) */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;600;700&family=Montserrat:wght@300;400;600;700&display=swap');

@import 'tailwindcss';
@import '../../vendor/livewire/flux/dist/flux.css';

@source '../views';
@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../vendor/livewire/flux-pro/stubs/**/*.blade.php';
@source '../../vendor/livewire/flux/stubs/**/*.blade.php';

@theme {
    /* Font definitions - to be updated in typography story */
    --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
    --font-arabic: 'Cairo', 'Tajawal', ui-sans-serif, system-ui, sans-serif;
    --font-english: 'Montserrat', 'Lato', ui-sans-serif, system-ui, sans-serif;

    /* Font Size Scale */
    --font-size-xs: 0.75rem;     /* 12px */
    --font-size-sm: 0.875rem;    /* 14px - Small text */
    --font-size-base: 1rem;      /* 16px - Body text */
    --font-size-lg: 1.125rem;    /* 18px */
    --font-size-xl: 1.25rem;     /* 20px */
    --font-size-2xl: 1.5rem;     /* 24px - H3 */
    --font-size-3xl: 2rem;       /* 32px - H2 */
    --font-size-4xl: 2.5rem;     /* 40px - H1 */

    /* ==========================================================================
       LIBRA Brand Palette - Dark Charcoal & Warm Gold (Story 12.2)
       ========================================================================== */

    /* Primary Dark Forest Green Palette */
    --color-primary: #2D3624;           /* Dark Forest Green - Header/Footer backgrounds */
    --color-primary-light: #3D4634;     /* Lighter Forest Green - Primary hover state */

    /* CTA Warm Gold */
    --color-cta: #A68966;               /* Warm Gold - CTA buttons, links, accents */
    --color-cta-hover: #8A7555;         /* Darker Gold - Button hover state */
    --color-cta-light: #C4A882;         /* Light Gold - Light CTA accent */

    /* Active Olive Green */
    --color-active: #4A5D23;            /* Olive Green - Active states, language toggle */
    --color-active-hover: #5A7030;      /* Olive Hover - Active state hover */

    /* Neutrals */
    --color-background: #F4F1EA;        /* Warm Cream - Main page background */
    --color-text: #2D322A;              /* Forest Green - Headings, body text */
    --color-card: #FFFFFF;              /* Pure White - Card backgrounds */

    /* For text on dark backgrounds */
    --color-off-white: #F4F1EA;         /* Warm Cream */

    /* Semantic Aliases - used by components */
    --color-accent: var(--color-cta);               /* Maps to Warm Gold */
    --color-accent-content: var(--color-cta);       /* Maps to Warm Gold */
    --color-accent-foreground: var(--color-text);   /* Forest Green - text on accent backgrounds */
    --color-body: var(--color-text);                /* Maps to Forest Green for body text */

    /* Backward Compatibility Aliases (legacy class names) */
    --color-navy: var(--color-primary);         /* Maps to Dark Charcoal */
    --color-gold: var(--color-cta);             /* Maps to Warm Gold */
    --color-gold-light: var(--color-cta-light); /* Maps to Light Gold */
    --color-cream: var(--color-background);     /* Maps to Warm Cream */
    --color-charcoal: var(--color-primary);     /* Maps to Dark Charcoal */
    --color-warm-gray: var(--color-cta);        /* Maps to Warm Gold */

    /* Status Colors - unchanged per AC6 */
    --color-success: #27AE60;
    --color-danger: #E74C3C;
    --color-warning: #F39C12;
}

@layer base {

    *,
    ::after,
    ::before,
    ::backdrop,
    ::file-selector-button {
        border-color: var(--color-gray-200, currentColor);
    }
}

/* ==========================================================================
   Flux UI Light Mode Overrides
   Ensure proper text visibility after dark mode removal
   ========================================================================== */

/* Flux Headings - ensure dark text */
[data-flux-heading] {
    color: rgb(24 24 27) !important;
}

/* Flux Text/Subheading - ensure readable gray */
[data-flux-text],
[data-flux-subheading] {
    color: rgb(113 113 122) !important;
}

/* Navlist group headings */
[data-flux-navlist-group] > div:first-child {
    color: rgb(113 113 122) !important;
}

/* Navlist items */
[data-flux-navlist-item] {
    color: rgb(63 63 70) !important;
}

[data-flux-navlist-item]:hover {
    color: rgb(24 24 27) !important;
    background-color: rgb(244 244 245) !important;
}

[data-flux-navlist-item][data-current="true"],
[data-flux-navlist-item][aria-current="page"] {
    color: rgb(24 24 27) !important;
    background-color: rgb(244 244 245) !important;
}

/* Flux Menu items */
[data-flux-menu-item] {
    color: rgb(63 63 70) !important;
}

[data-flux-menu-item]:hover {
    color: rgb(24 24 27) !important;
    background-color: rgb(244 244 245) !important;
}

/* Flux Modal content */
[data-flux-modal] {
    background-color: rgb(255 255 255) !important;
    color: rgb(24 24 27) !important;
}

/* Flux Dropdown/Select */
[data-flux-menu],
[data-flux-listbox] {
    background-color: rgb(255 255 255) !important;
    border-color: rgb(228 228 231) !important;
}

/* Flux Profile text */
[data-flux-profile] span {
    color: rgb(63 63 70) !important;
}

/* Flux Badge - ensure text is visible */
[data-flux-badge] {
    color: rgb(255 255 255) !important;
}

/* Flux Badge variants with proper contrast */
[data-flux-badge][data-variant="outline"] {
    color: rgb(63 63 70) !important;
}

/* Flux Callout text */
[data-flux-callout],
[data-flux-callout] * {
    color: rgb(63 63 70) !important;
}

[data-flux-callout-heading] {
    color: rgb(24 24 27) !important;
}

/* Flux Table cells */
[data-flux-table] td,
[data-flux-table] th {
    color: rgb(63 63 70) !important;
}

[data-flux-table] th {
    color: rgb(24 24 27) !important;
}

/* Flux Card content */
[data-flux-card] {
    background-color: rgb(255 255 255) !important;
    color: rgb(63 63 70) !important;
}

/* Flux Separator */
[data-flux-separator] {
    background-color: rgb(228 228 231) !important;
}

/* ==========================================================================
   Logo Badge Styling (Story 12.2)
   Creates "seal/stamp" effect for logo on Dark Charcoal backgrounds
   ========================================================================== */

.logo-badge {
    border: 2px solid var(--color-text);
    box-shadow: 4px 4px 6px rgba(45, 54, 36, 0.5);
}

/* ==========================================================================
   Flux UI Form Component Styling (Story 9.5)
   ========================================================================== */

/* Field wrapper - grid layout with gap */
[data-flux-field]:not(ui-radio, ui-checkbox) {
    @apply grid gap-2;
}

/* Label styling - semibold weight per specs */
[data-flux-label] {
    @apply !mb-0 !leading-tight font-semibold text-body;
}

/* Input, Textarea, Select base styling */
input[data-flux-control],
textarea[data-flux-control],
[data-flux-control] input,
select[data-flux-control],
[data-flux-select-button] {
    @apply border-body/30 rounded-md transition-colors text-body;
}

/* Focus states - Warm Gold border with subtle ring (AC4) */
input:focus[data-flux-control],
textarea:focus[data-flux-control],
select:focus[data-flux-control],
[data-flux-control] input:focus,
[data-flux-select-button]:focus {
    @apply outline-hidden border-cta ring-2 ring-cta/20;
}

/* Textarea minimum height */
textarea[data-flux-control] {
    @apply min-h-[120px] resize-y;
}

/* Checkbox styling - Warm Gold accent when checked (AC4) */
[data-flux-checkbox] input[type="checkbox"],
input[type="checkbox"][data-flux-control] {
    @apply w-5 h-5 rounded border-body/30 text-cta focus:ring-cta focus:ring-offset-0;
}

/* Radio styling - Warm Gold accent when selected (AC4) */
[data-flux-radio] input[type="radio"],
input[type="radio"][data-flux-control] {
    @apply w-5 h-5 border-body/30 text-cta focus:ring-cta focus:ring-offset-0;
}

/* Error state styling for Flux fields */
[data-flux-field]:has([data-flux-error]) input[data-flux-control],
[data-flux-field]:has([data-flux-error]) textarea[data-flux-control],
[data-flux-field]:has([data-flux-error]) select[data-flux-control],
[data-flux-field]:has([data-flux-error]) [data-flux-select-button] {
    @apply border-danger;
}

[data-flux-field]:has([data-flux-error]) input:focus[data-flux-control],
[data-flux-field]:has([data-flux-error]) textarea:focus[data-flux-control],
[data-flux-field]:has([data-flux-error]) select:focus[data-flux-control],
[data-flux-field]:has([data-flux-error]) [data-flux-select-button]:focus {
    @apply border-danger ring-danger/20;
}

/* Error message styling */
[data-flux-error] {
    @apply text-sm text-danger mt-1;
}

/* RTL support for Flux components */
[dir="rtl"] [data-flux-label] {
    @apply text-right;
}

[dir="rtl"] [data-flux-error] {
    @apply text-right;
}

[dir="rtl"] input[data-flux-control],
[dir="rtl"] textarea[data-flux-control],
[dir="rtl"] select[data-flux-control] {
    @apply text-right;
}

/* \[:where(&)\]:size-4 {
    @apply size-4;
} */

/* Prose Brand styling for blog posts - Dark Charcoal & Warm Gold (AC5, AC8) */
.prose-brand {
    --tw-prose-headings: var(--color-text);       /* Forest Green */
    --tw-prose-links: var(--color-cta);           /* Warm Gold */
    --tw-prose-bold: var(--color-text);           /* Forest Green */
    --tw-prose-body: var(--color-text);           /* Forest Green */
}

.prose-brand a {
    color: var(--color-cta);                      /* Warm Gold (AC5) */
    text-decoration: underline;
}

.prose-brand a:hover {
    color: var(--color-cta-hover);                /* Darker Gold (AC5) */
}

/* Backward compatibility alias for prose-navy */
.prose-navy {
    --tw-prose-headings: var(--color-text);
    --tw-prose-links: var(--color-cta);
    --tw-prose-bold: var(--color-text);
    --tw-prose-body: var(--color-text);
}

.prose-navy a {
    color: var(--color-cta);
    text-decoration: underline;
}

.prose-navy a:hover {
    color: var(--color-cta-hover);
}

/* Dynamic Font Selection based on language */
html[lang="ar"] body {
    font-family: var(--font-arabic);
}

html[lang="en"] body {
    font-family: var(--font-english);
}

/* Typography Base Styles */
body {
    font-size: var(--font-size-base);
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
    line-height: 1.3;
}

h1 {
    font-size: var(--font-size-4xl);
    font-weight: 700;
}

h2 {
    font-size: var(--font-size-3xl);
    font-weight: 600;
}

h3 {
    font-size: var(--font-size-2xl);
    font-weight: 600;
}

small, .text-sm {
    font-size: var(--font-size-sm);
}

/* ==========================================================================
   Button Styling System (Story 9.4)
   ========================================================================== */

/* Primary button - Warm Gold background with White text (AC3) */
.btn-primary {
    @apply bg-cta text-white rounded-md px-6 py-3 font-semibold transition-colors;
    @apply hover:bg-cta-hover;
    @apply focus:outline-none focus:ring-2 focus:ring-cta focus:ring-offset-2;
}

/* Secondary button - Dark Charcoal border, Dark text (AC3) */
.btn-secondary {
    @apply bg-transparent border-2 border-primary text-text rounded-md px-6 py-3 font-semibold transition-colors;
    @apply hover:bg-primary hover:text-off-white;
    @apply focus:outline-none focus:ring-2 focus:ring-cta focus:ring-offset-2;
}

/* Danger button - Red background */
.btn-danger {
    @apply bg-danger text-white rounded-md px-6 py-3 font-semibold transition-colors;
    @apply hover:bg-danger/90;
    @apply focus:outline-none focus:ring-2 focus:ring-danger focus:ring-offset-2;
}

/* Disabled state - applies to all button variants */
.btn-disabled,
.btn-primary:disabled,
.btn-secondary:disabled,
.btn-danger:disabled,
button.btn-primary:disabled,
button.btn-secondary:disabled,
button.btn-danger:disabled {
    @apply !bg-[#CCCCCC] !text-[#666666] !cursor-not-allowed !border-transparent;
    @apply hover:!bg-[#CCCCCC];
}

/* Size variants */
.btn-sm {
    @apply px-4 py-2 text-sm;
}

.btn-lg {
    @apply px-8 py-4 text-lg;
}

/* Full width for mobile */
.btn-full {
    @apply w-full;
}

/* Loading state */
.btn-loading {
    @apply relative pointer-events-none opacity-75;
}

/* Icon spacing within buttons */
.btn-icon-left {
    @apply flex items-center gap-2;
}

.btn-icon-right {
    @apply flex items-center gap-2 flex-row-reverse;
}

/* Button groups - adjust border-radius for grouped buttons */
.btn-group {
    @apply flex;
}

.btn-group > .btn-primary:not(:first-child):not(:last-child),
.btn-group > .btn-secondary:not(:first-child):not(:last-child),
.btn-group > .btn-danger:not(:first-child):not(:last-child) {
    @apply rounded-none;
}

.btn-group > .btn-primary:first-child,
.btn-group > .btn-secondary:first-child,
.btn-group > .btn-danger:first-child {
    @apply rounded-e-none;
}

.btn-group > .btn-primary:last-child,
.btn-group > .btn-secondary:last-child,
.btn-group > .btn-danger:last-child {
    @apply rounded-s-none;
}

/* RTL support for icon buttons */
[dir="rtl"] .btn-icon-left {
    @apply flex-row-reverse;
}

[dir="rtl"] .btn-icon-right {
    @apply flex-row;
}

/* ==========================================================================
   Form Styling System (Story 9.5)
   ========================================================================== */

/* Input field styling - Warm Gold focus (AC4) */
.input-field {
    @apply w-full border border-body/30 rounded-md px-4 py-3
           focus:border-cta focus:ring-2 focus:ring-cta/20
           transition-colors outline-none bg-white;
}

/* Input error state */
.input-error {
    @apply border-danger focus:border-danger focus:ring-danger/20;
}

/* Form label styling */
.form-label {
    @apply block text-sm font-semibold text-body mb-2;
}

/* Required field indicator - for manual class usage */
.form-label-required::after {
    content: ' *';
    @apply text-danger;
}

/* Required indicator styling for Flux labels with .required class */
[data-flux-label].required::after {
    content: ' *';
    @apply text-danger;
}

/* Error message styling */
.error-message {
    @apply text-sm text-danger mt-1;
}

/* Textarea specific styling - Warm Gold focus (AC4) */
.textarea-field {
    @apply w-full border border-body/30 rounded-md px-4 py-3
           focus:border-cta focus:ring-2 focus:ring-cta/20
           transition-colors outline-none bg-white
           min-h-[120px] resize-y;
}

/* Select dropdown styling - Warm Gold focus (AC4) */
.select-field {
    @apply w-full border border-body/30 rounded-md px-4 py-3
           focus:border-cta focus:ring-2 focus:ring-cta/20
           transition-colors outline-none bg-white;
}

/* Custom checkbox styling - Warm Gold (AC4) */
.checkbox-custom {
    @apply w-5 h-5 rounded border-body/30 text-cta
           focus:ring-cta focus:ring-offset-0;
}

/* Custom radio styling - Warm Gold (AC4) */
.radio-custom {
    @apply w-5 h-5 border-body/30 text-cta
           focus:ring-cta focus:ring-offset-0;
}

/* Checkbox/Radio with error state */
.checkbox-error,
.radio-error {
    @apply border-danger;
}

/* RTL support for form labels */
[dir="rtl"] .form-label {
    @apply text-right;
}

/* RTL support for error messages */
[dir="rtl"] .error-message {
    @apply text-right;
}

/* RTL support for form fields - use logical properties */
[dir="rtl"] .input-field,
[dir="rtl"] .textarea-field,
[dir="rtl"] .select-field {
    @apply text-right;
}

/* ==========================================================================
   Card & Container Styling System (Story 9.6)
   ========================================================================== */

/* Container max-width - 1200px centered */
.container-max {
    @apply max-w-[1200px] mx-auto px-4 sm:px-6 lg:px-8;
}

/* Card shadow values */
.shadow-card {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.shadow-card-hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* ==========================================================================
   RTL/LTR Layout Utilities (Story 9.8)
   ========================================================================== */

/* RTL-aware icon flipping - use on directional icons like chevrons, arrows */
[dir="rtl"] .flip-rtl {
    transform: scaleX(-1);
}

/* Force LTR for numbers, emails, code, and other content that should stay LTR */
.ltr-content {
    direction: ltr;
    unicode-bidi: embed;
    text-align: inherit;
}

/* Inline LTR content within RTL text flow */
.ltr-inline {
    direction: ltr;
    unicode-bidi: isolate;
}

/* ==========================================================================
   Responsive Design System (Story 9.9)
   Breakpoints per PRD Section 7.4:
   - Mobile: < 576px (single column, stacked layouts)
   - Tablet: 576px - 991px (two columns where appropriate)
   - Desktop: 992px - 1199px (full layouts with sidebars)
   - Large Desktop: >= 1200px (max-width container: 1200px)
   ========================================================================== */

/* Prevent horizontal page scroll at any viewport */
html, body {
    @apply overflow-x-hidden;
}

/* Ensure images/media don't overflow */
img, video, iframe {
    @apply max-w-full h-auto;
}

/* Touch-friendly targets - minimum 44px for interactive elements */
.touch-target {
    @apply min-h-[44px] min-w-[44px];
}

/* Dashboard grid - responsive column layout */
.dashboard-grid {
    @apply grid gap-4;
    @apply grid-cols-1;           /* Mobile: single column */
    @apply sm:grid-cols-2;        /* Tablet: 2 columns */
    @apply lg:grid-cols-3;        /* Desktop: 3 columns */
    @apply xl:grid-cols-4;        /* Large: 4 columns */
}

/* Stats grid - responsive layout for stat cards */
.stats-grid {
    @apply grid gap-4;
    @apply grid-cols-1;           /* Mobile: single column */
    @apply sm:grid-cols-2;        /* Tablet: 2 columns */
    @apply lg:grid-cols-4;        /* Desktop: 4 columns */
}

/* Widget grid - responsive layout for dashboard widgets */
.widget-grid {
    @apply grid gap-6;
    @apply grid-cols-1;           /* Mobile: single column */
    @apply lg:grid-cols-3;        /* Desktop: 3 columns */
}

/* Responsive table wrapper - horizontal scroll for tables on mobile */
.table-responsive {
    @apply overflow-x-auto -mx-4 px-4;
    @apply sm:mx-0 sm:px-0;       /* Remove negative margin on larger screens */
}

/* Table wrapper with shadow indicator for scrollable content */
.table-scroll-wrapper {
    @apply relative overflow-x-auto;
    -webkit-overflow-scrolling: touch;
}

/* Form layout - responsive form field arrangement */
.form-row {
    @apply flex flex-col gap-4;
    @apply sm:flex-row sm:items-end;
}

/* Form actions - responsive button placement */
.form-actions {
    @apply flex flex-col gap-3;
    @apply sm:flex-row sm:justify-end;
}

/* Mobile-first button - full width on mobile, auto on larger screens */
.btn-responsive {
    @apply w-full sm:w-auto;
}

/* Card full-width on mobile */
.card-responsive {
    @apply w-full;
}

/* Collapsible content - for accordion sections on mobile */
.collapsible-content {
    @apply transition-all duration-200 ease-in-out overflow-hidden;
}

/* Modal responsive - full screen on mobile, centered on desktop */
.modal-responsive {
    @apply fixed inset-0 sm:inset-auto sm:relative;
    @apply w-full sm:max-w-lg sm:mx-auto;
    @apply h-full sm:h-auto sm:max-h-[90vh];
    @apply rounded-none sm:rounded-lg;
}

/* Charts container - responsive height */
.chart-container {
    @apply h-64 sm:h-72 lg:h-80;
    @apply w-full;
}

/* Header actions - stack on mobile, inline on larger screens */
.header-actions {
    @apply flex flex-col gap-3 w-full;
    @apply sm:flex-row sm:w-auto sm:items-center;
}

/* Page header - responsive layout */
.page-header {
    @apply flex flex-col gap-4;
    @apply sm:flex-row sm:items-center sm:justify-between;
}

/* Filter bar - responsive layout */
.filter-bar {
    @apply flex flex-col gap-4;
    @apply sm:flex-row sm:items-end sm:flex-wrap;
}

/* Content section - responsive padding */
.section-responsive {
    @apply px-4 py-6;
    @apply sm:px-6 sm:py-8;
    @apply lg:px-8;
}

/* RTL-aware responsive sidebar */
@media (max-width: 991px) {
    .sidebar-responsive {
        @apply fixed inset-y-0 start-0 w-64;
        @apply transform -translate-x-full transition-transform duration-200;
        @apply z-40;
    }
    .sidebar-responsive.open {
        @apply translate-x-0;
    }
    /* RTL: sidebar comes from right */
    [dir="rtl"] .sidebar-responsive {
        @apply end-0 start-auto translate-x-full;
    }
    [dir="rtl"] .sidebar-responsive.open {
        @apply translate-x-0;
    }
}

/* Sidebar overlay for mobile */
.sidebar-overlay {
    @apply fixed inset-0 bg-black/50 z-30;
    @apply transition-opacity duration-200;
}

/* Sticky sidebar for desktop */
@media (min-width: 1024px) {
    body:has(> [data-flux-sidebar]) {
        display: flex;
        align-items: flex-start;
    }

    [data-flux-sidebar] {
        position: sticky !important;
        top: 0 !important;
        height: 100vh !important;
        flex-shrink: 0;
    }
}

/* Calendar responsive - smaller cells on mobile */
.calendar-grid {
    @apply grid grid-cols-7 gap-1;
}

.calendar-cell {
    @apply h-10 sm:h-12;
    @apply text-sm sm:text-base;
}

/* Time slot grid - responsive columns */
.time-slots-grid {
    @apply grid gap-2;
    @apply grid-cols-2 sm:grid-cols-3 md:grid-cols-4;
}

/* Time slot button - touch-friendly */
.time-slot-btn {
    @apply p-3 min-h-[44px];
    @apply text-sm sm:text-base;
}

/* Post/blog grid - responsive layout */
.posts-grid {
    @apply grid gap-6;
    @apply grid-cols-1;
    @apply sm:grid-cols-2;
    @apply lg:grid-cols-3;
}

/* Timeline/case view - responsive layout */
.timeline-container {
    @apply relative;
}

.timeline-line {
    @apply absolute top-0 bottom-0 w-0.5 bg-zinc-200;
    @apply start-4 sm:start-6;
}

.timeline-item {
    @apply relative ps-10 sm:ps-14;
    @apply pb-6;
}

.timeline-dot {
    @apply absolute start-2 sm:start-4;
    @apply w-4 h-4 sm:w-5 sm:h-5;
    @apply rounded-full bg-accent;
    @apply transform -translate-x-1/2;
}

/* Empty state - responsive sizing */
.empty-state {
    @apply py-8 sm:py-12;
    @apply text-center;
}

.empty-state-icon {
    @apply w-12 h-12 sm:w-16 sm:h-16;
    @apply mx-auto mb-4;
}

/* Pagination responsive */
.pagination-responsive {
    @apply flex flex-wrap justify-center gap-1;
    @apply sm:gap-2;
}

/* Hide on mobile / show on desktop utilities */
.hide-mobile {
    @apply hidden sm:block;
}

.show-mobile {
    @apply block sm:hidden;
}

/* Stack on mobile, inline on desktop */
.stack-mobile {
    @apply flex flex-col;
    @apply sm:flex-row sm:items-center;
}

/* Gap utilities for responsive spacing */
.gap-responsive {
    @apply gap-3 sm:gap-4 lg:gap-6;
}

/* Text size responsive */
.text-responsive-sm {
    @apply text-xs sm:text-sm;
}

.text-responsive-base {
    @apply text-sm sm:text-base;
}

.text-responsive-lg {
    @apply text-base sm:text-lg lg:text-xl;
}

.text-responsive-xl {
    @apply text-lg sm:text-xl lg:text-2xl;
}

/* Heading responsive sizes */
.heading-responsive-page {
    @apply text-xl sm:text-2xl lg:text-3xl;
    @apply font-bold;
}

.heading-responsive-section {
    @apply text-lg sm:text-xl;
    @apply font-semibold;
}

/* ==========================================================================
   Animations & Micro-interactions (Story 9.11)
   Subtle, professional animations under 300ms
   ========================================================================== */

/* Base transitions */
.transition-default {
    @apply transition-all duration-150 ease-in-out;
}

.transition-slow {
    @apply transition-all duration-200 ease-in-out;
}

/* Button hover transition - 150ms ease */
.btn {
    @apply transition-colors duration-150;
}

/* Card lift effect - 200ms ease */
.card-hover {
    @apply transition-all duration-200;
}

.card-hover:hover {
    @apply -translate-y-0.5;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Link color transition */
.link-transition {
    @apply transition-colors duration-150;
}

/* Skeleton loader - pulse animation */
.skeleton {
    @apply animate-pulse bg-accent/30 rounded;
}

/* Toast animation classes */
.toast-enter {
    @apply transform translate-x-full opacity-0;
}

.toast-enter-active {
    @apply transform translate-x-0 opacity-100 transition-all duration-200;
}

/* RTL toast animation - slides from left */
[dir="rtl"] .toast-enter {
    @apply -translate-x-full;
}

[dir="rtl"] .toast-enter-active {
    @apply translate-x-0;
}

/* Success checkmark animation */
@keyframes checkmark {
    0% { stroke-dashoffset: 100; }
    100% { stroke-dashoffset: 0; }
}

.checkmark-animated path {
    stroke-dasharray: 100;
    animation: checkmark 0.3s ease-in-out forwards;
}

/* Error shake animation */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

.shake {
    animation: shake 0.3s ease-in-out;
}

/* Modal animation classes */
.modal-enter {
    @apply opacity-0 scale-95;
}

.modal-enter-active {
    @apply opacity-100 scale-100 transition-all duration-200;
}

.modal-backdrop-enter {
    @apply opacity-0;
}

.modal-backdrop-enter-active {
    @apply opacity-100 transition-opacity duration-200;
}

/* Progress bar animation */
.progress-bar {
    @apply transition-all duration-200 ease-out;
}

/* ==========================================================================
   Auth Background Pattern (Story 13.3)
   Subtle geometric dot pattern for auth form panels
   ========================================================================== */

/* Pattern overlay using pseudo-element - fixed positioning doesn't scroll */
.auth-pattern {
    position: relative;
}

.auth-pattern::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('/images/auth-pattern.svg');
    background-repeat: repeat;
    pointer-events: none;
    z-index: 0;
}

/* Ensure content stays above pattern */
.auth-pattern > * {
    position: relative;
    z-index: 1;
}

/* ==========================================================================
   Accessibility Styles (Story 9.10)
   WCAG 2.1 AA Compliance
   ========================================================================== */

/* Focus styles - visible Warm Gold outline for keyboard navigation (AC4) */
:focus-visible {
    @apply outline-2 outline-offset-2 outline-cta;
}

/* Skip link - hidden until focused, Dark Charcoal bg with Warm Cream text */
.skip-link {
    @apply sr-only focus:not-sr-only focus:absolute focus:top-4 focus:start-4
           focus:bg-primary focus:text-off-white focus:px-4 focus:py-2 focus:rounded-md
           focus:font-semibold focus:z-[100];
}

/* Reduced motion - respect user preference for reduced 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;
    }
}