/* ============================================================================
   TASKEEN DESIGN SYSTEM - COMPLETE CSS VARIABLES
   Version: 1.0
   Last Updated: 2024
   
   This file contains all design tokens for the Taskeen application
   based on the official design system specification.
============================================================================ */

/* ============================================================================
   FONT IMPORTS
============================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@200;300;400;500;600;700;800;900;1000&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@200;300;400;500;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght@100;200;300;400;500;600;700;800;900&display=swap');

/* ============================================================================
   ROOT VARIABLES - DESIGN TOKENS
============================================================================ */
/* ============================================================================
   ROOT VARIABLES - DESIGN TOKENS
   
   NOTE: Actual color/theme variables are now loaded dynamically 
   from /css/themes/theme-*.css files.
   
   This :root block only contains structure/spacing variables that are 
   shared across all themes.
   ============================================================================ */
:root {
   /* ==========================================================================
     SPACING SYSTEM
  ========================================================================== */
   --spacing-0: 0rem;
   --spacing-xs: 0.25rem;
   /* 4px */
   --spacing-sm: 0.5rem;
   /* 8px */
   --spacing-md: 0.75rem;
   /* 12px */
   --spacing-lg: 1rem;
   /* 16px */
   --spacing-xl: 1.25rem;
   /* 24px */
   --spacing-2xl: 1.5rem;
   /* 32px */
   --spacing-3xl: 2rem;
   /* 48px */
   --section-gap: 160px;

   /* ==========================================================================
     BORDER RADIUS SYSTEM
  ========================================================================== */
   --radius-none: 0rem;
   --radius-xs: 0.25rem;
   /* 4px */
   --radius-sm: 0.375rem;
   /* 6px */
   --radius-sm-alt: 0.5rem;
   /* 8px */
   --radius-md: 0.75rem;
   /* 12px */
   --radius-md-alt: 0.5rem;
   /* 8px */
   --radius-lg: 1rem;
   /* 16px */
   --radius-xl: 2rem;
   /* 32px */
   --radius-pill-sm: 2.5rem;
   /* 40px */
   --radius-pill-lg: 3.5rem;
   /* 56px */
   --radius-spacing-sm: 0.5rem;
   --radius-spacing-number: 0rem;

   /* ==========================================================================
     TYPOGRAPHY - FONT FAMILIES
  ========================================================================== */
   --font-default: Montserrat, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
   --font-arabic: Cairo, 'Arabic Typesetting', sans-serif;
   --font-secondary: Lato, Inter, 'Kumbh Sans', sans-serif;

   /* ==========================================================================
     TYPOGRAPHY - FONT SIZES
  ========================================================================== */
   /* Large Titles */
   --font-size-page-title: 2.1875rem;
   /* 35px - Larger for better visibility */
   --font-size-section-title: 1.875rem;
   /* 30px */
   --font-size-card-title: 1.5rem;
   /* 24px */

   /* Body Text */
   --font-size-body-xl: 1.125rem;
   /* 18px */
   --font-size-body-lg: 1.0625rem;
   /* 17px - Increased from 16px */
   --font-size-body-md: 0.9375rem;
   /* 15px - Increased from 14px */
   --font-size-body-sm: 0.75rem;
   /* 12px - Increased from 9px */

   /* ==========================================================================
     TYPOGRAPHY - LINE HEIGHTS
  ========================================================================== */
   --line-height-page-title: 2.5rem;
   /* 40px */
   --line-height-section-title: 2.1875rem;
   /* 35px */
   --line-height-card-title: 1.9375rem;
   /* 31px */
   --line-height-body-xl: 1.375rem;
   /* 22px */
   --line-height-body-lg: 1.25rem;
   /* 20px */
   --line-height-body-md: 1.125rem;
   /* 18px */

   /* ==========================================================================
     COMPONENT DIMENSIONS
  ========================================================================== */
   /* Navigation */
   --left-nav-width: 9rem;
   /* 144px - Slightly wider sidebar */
   --left-nav-expanded: 18rem;
   /* 288px */
   --header-height: 4.375rem;
   /* 70px */

   /* Buttons */
   --button-height-lg: 3rem;
   /* 48px */
   --button-height-md: 2.75rem;
   /* 44px */
   --button-height-sm: 2.5rem;
   /* 40px */

   /* Input Fields */
   --input-height: 2.5rem;
   /* 40px */

   /* Cards */
   --card-padding: 1.5rem;
   /* 24px */
   --card-padding-lg: 2rem;
   /* 32px */

   /* ==========================================================================
     TRANSITIONS
  ========================================================================== */
   --transition-default: all 300ms ease-out;
   --transition-fast: all 150ms ease-out;
   --transition-slow: all 500ms ease-out;
}

/* ============================================================================
   LANGUAGE-SPECIFIC FONT SETTINGS
============================================================================ */
:root:lang(en) {
   --font-default: Montserrat, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

:root:lang(ar) {
   --font-default: Cairo, 'Arabic Typesetting', sans-serif;
}

/* ============================================================================
   GLOBAL RESET & BASE STYLES
============================================================================ */
*,
*::before,
*::after {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}

body {
   font-family: var(--font-default);
   font-size: 1.0625rem;
   line-height: 1.6;
   color: var(--Text-Colors-Dark-Gray);
   background-color: var(--body-background);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-rendering: optimizeLegibility;
}

/* ============================================================================
   UTILITY CLASSES
============================================================================ */

/* Display */
.d-flex {
   display: flex;
}

.d-inline-flex {
   display: inline-flex;
}

.d-block {
   display: block;
}

.d-inline-block {
   display: inline-block;
}

.d-none {
   display: none;
}

/* Flex Direction */
.flex-column {
   flex-direction: column;
}

.flex-row {
   flex-direction: row;
}

/* Justify Content */
.justify-center {
   justify-content: center;
}

.justify-between {
   justify-content: space-between;
}

.justify-around {
   justify-content: space-around;
}

.justify-end {
   justify-content: flex-end;
}

.justify-start {
   justify-content: flex-start;
}

/* Align Items */
.align-center {
   align-items: center;
}

.align-start {
   align-items: flex-start;
}

.align-end {
   align-items: flex-end;
}

.align-stretch {
   align-items: stretch;
}

/* Gap Utilities */
.gap-xs {
   gap: var(--spacing-xs);
}

.gap-sm {
   gap: var(--spacing-sm);
}

.gap-md {
   gap: var(--spacing-md);
}

.gap-lg {
   gap: var(--spacing-lg);
}

.gap-xl {
   gap: var(--spacing-xl);
}

.gap-2xl {
   gap: var(--spacing-2xl);
}

/* Text Alignment */
.text-left {
   text-align: left;
}

.text-center {
   text-align: center;
}

.text-right {
   text-align: right;
}

/* Cursor */
.cursor-pointer {
   cursor: pointer;
}

.cursor-default {
   cursor: default;
}

.cursor-not-allowed {
   cursor: not-allowed;
}

.pointer-none {
   pointer-events: none;
}

/* Transitions */
.transition-default {
   transition: var(--transition-default);
}

.transition-fast {
   transition: var(--transition-fast);
}

.transition-slow {
   transition: var(--transition-slow);
}

/* Border Radius */
.radius-sm {
   border-radius: var(--radius-sm);
}

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

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

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

/* Shadows */
.shadow-card {
   box-shadow: var(--shadow-card);
}

.shadow-dropdown {
   box-shadow: var(--shadow-dropdown);
}

.shadow-selected {
   box-shadow: var(--shadow-selected);
}

/* ============================================================================
   END OF TASKEEN DESIGN SYSTEM
============================================================================ */