/**
 * Design System Variables - Coran 3D
 * Warm Sepia/Sand Theme - Refined & Professional
 * ================================================
 */

:root {
    /* =============================================
       DARK MODE (Default) - Warm Sepia Dark
       ============================================= */

    /* Background Colors - Deep warm tones */
    --bg-primary: #0D0B09;
    --bg-secondary: #161310;
    --bg-tertiary: #1E1A16;
    --bg-card: rgba(255, 248, 240, 0.03);
    --bg-card-hover: rgba(255, 248, 240, 0.06);
    --bg-input: rgba(255, 248, 240, 0.04);
    --bg-elevated: #1E1A16;

    /* Surface Colors with subtle warmth */
    --surface-glass: rgba(255, 248, 240, 0.02);
    --surface-overlay: rgba(13, 11, 9, 0.85);

    /* Border Colors */
    --border-subtle: rgba(255, 248, 240, 0.06);
    --border-default: rgba(255, 248, 240, 0.10);
    --border-strong: rgba(255, 248, 240, 0.15);
    --border-focus: rgba(212, 175, 125, 0.5);

    /* Text Colors - Warm whites */
    --text-primary: #FFF8F0;
    --text-secondary: rgba(255, 248, 240, 0.65);
    --text-tertiary: rgba(255, 248, 240, 0.40);
    --text-muted: rgba(255, 248, 240, 0.25);

    /* Accent Colors - Warm Gold/Sand */
    --accent-primary: #D4AF7D;
    --accent-secondary: #C9A066;
    --accent-tertiary: #A88B5A;
    --accent-soft: rgba(212, 175, 125, 0.12);
    --accent-softer: rgba(212, 175, 125, 0.06);
    --accent-glow: rgba(212, 175, 125, 0.25);

    /* Semantic Colors */
    --success: #7CB07D;
    --success-soft: rgba(124, 176, 125, 0.12);
    --warning: #D4A574;
    --warning-soft: rgba(212, 165, 116, 0.12);
    --danger: #C9756B;
    --danger-soft: rgba(201, 117, 107, 0.12);
    --info: #7BA3C9;
    --info-soft: rgba(123, 163, 201, 0.12);

    /* Decorative Colors - Earth tones */
    --terracotta: #C4785A;
    --terracotta-soft: rgba(196, 120, 90, 0.15);
    --sand: #D4C4A8;
    --sand-soft: rgba(212, 196, 168, 0.15);
    --olive: #8B9A6B;
    --olive-soft: rgba(139, 154, 107, 0.15);
    --clay: #9A7B6B;
    --clay-soft: rgba(154, 123, 107, 0.15);
    --ochre: #C9A54D;
    --ochre-soft: rgba(201, 165, 77, 0.15);
    --sienna: #A0522D;
    --sienna-soft: rgba(160, 82, 45, 0.15);

    /* Gradient Backgrounds */
    --gradient-hero: linear-gradient(
        135deg,
        rgba(13, 11, 9, 0.95) 0%,
        rgba(30, 26, 22, 0.90) 50%,
        rgba(45, 38, 32, 0.85) 100%
    );
    --gradient-card: linear-gradient(
        180deg,
        rgba(255, 248, 240, 0.03) 0%,
        rgba(255, 248, 240, 0.01) 100%
    );
    --gradient-overlay: linear-gradient(
        180deg,
        transparent 0%,
        rgba(13, 11, 9, 0.6) 50%,
        rgba(13, 11, 9, 0.95) 100%
    );

    /* Shadow System */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.25);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.30);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.40);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.50);
    --shadow-glow: 0 0 30px rgba(212, 175, 125, 0.15);
    --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.25);

    /* Progress Bar */
    --progress-bg: rgba(255, 248, 240, 0.10);
    --progress-fill: var(--accent-primary);
}

/* =============================================
   LIGHT MODE - Warm Cream/Parchment
   ============================================= */

[data-theme="light"] {
    /* Background Colors - Warm cream tones */
    --bg-primary: #FAF6F0;
    --bg-secondary: #FFFFFF;
    --bg-tertiary: #F5EFE6;
    --bg-card: rgba(139, 115, 85, 0.04);
    --bg-card-hover: rgba(139, 115, 85, 0.08);
    --bg-input: rgba(139, 115, 85, 0.05);
    --bg-elevated: #FFFFFF;

    /* Surface Colors */
    --surface-glass: rgba(255, 255, 255, 0.80);
    --surface-overlay: rgba(250, 246, 240, 0.90);

    /* Border Colors */
    --border-subtle: rgba(139, 115, 85, 0.08);
    --border-default: rgba(139, 115, 85, 0.12);
    --border-strong: rgba(139, 115, 85, 0.20);
    --border-focus: rgba(166, 130, 80, 0.5);

    /* Text Colors - Rich brown tones */
    --text-primary: #2D2520;
    --text-secondary: rgba(45, 37, 32, 0.70);
    --text-tertiary: rgba(45, 37, 32, 0.50);
    --text-muted: rgba(45, 37, 32, 0.30);

    /* Accent Colors - Deeper gold for light mode */
    --accent-primary: #A68250;
    --accent-secondary: #8B6B3D;
    --accent-tertiary: #6B5230;
    --accent-soft: rgba(166, 130, 80, 0.12);
    --accent-softer: rgba(166, 130, 80, 0.06);
    --accent-glow: rgba(166, 130, 80, 0.20);

    /* Semantic Colors - Softer for light mode */
    --success: #5A8A5B;
    --success-soft: rgba(90, 138, 91, 0.12);
    --warning: #B8895A;
    --warning-soft: rgba(184, 137, 90, 0.12);
    --danger: #A65A50;
    --danger-soft: rgba(166, 90, 80, 0.12);
    --info: #5A7A9A;
    --info-soft: rgba(90, 122, 154, 0.12);

    /* Decorative Colors */
    --terracotta: #A65A45;
    --terracotta-soft: rgba(166, 90, 69, 0.12);
    --sand: #C4B090;
    --sand-soft: rgba(196, 176, 144, 0.20);
    --olive: #6B7A55;
    --olive-soft: rgba(107, 122, 85, 0.12);
    --clay: #7A635A;
    --clay-soft: rgba(122, 99, 90, 0.12);
    --ochre: #A68A3D;
    --ochre-soft: rgba(166, 138, 61, 0.12);
    --sienna: #8A4A2A;
    --sienna-soft: rgba(138, 74, 42, 0.12);

    /* Gradients for Light Mode */
    --gradient-hero: linear-gradient(
        135deg,
        rgba(250, 246, 240, 0.95) 0%,
        rgba(245, 239, 230, 0.90) 50%,
        rgba(240, 232, 220, 0.85) 100%
    );
    --gradient-card: linear-gradient(
        180deg,
        rgba(139, 115, 85, 0.03) 0%,
        rgba(139, 115, 85, 0.01) 100%
    );
    --gradient-overlay: linear-gradient(
        180deg,
        transparent 0%,
        rgba(250, 246, 240, 0.5) 50%,
        rgba(250, 246, 240, 0.95) 100%
    );

    /* Shadows for Light Mode */
    --shadow-xs: 0 1px 2px rgba(139, 115, 85, 0.08);
    --shadow-sm: 0 2px 4px rgba(139, 115, 85, 0.10);
    --shadow-md: 0 4px 12px rgba(139, 115, 85, 0.12);
    --shadow-lg: 0 8px 24px rgba(139, 115, 85, 0.15);
    --shadow-xl: 0 16px 48px rgba(139, 115, 85, 0.18);
    --shadow-glow: 0 0 30px rgba(166, 130, 80, 0.12);
    --shadow-card: 0 2px 12px rgba(139, 115, 85, 0.08);

    /* Progress Bar */
    --progress-bg: rgba(139, 115, 85, 0.12);
    --progress-fill: var(--accent-primary);
}

/* =============================================
   SPACING SYSTEM
   ============================================= */

:root {
    --space-0: 0;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 32px;
    --space-8: 40px;
    --space-9: 48px;
    --space-10: 64px;
    --space-11: 80px;
    --space-12: 96px;
}

/* =============================================
   BORDER RADIUS
   ============================================= */

:root {
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 20px;
    --radius-3xl: 24px;
    --radius-full: 9999px;
}

/* =============================================
   TYPOGRAPHY SCALE
   ============================================= */

:root {
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-arabic: 'Amiri', 'Traditional Arabic', serif;

    --text-xs: 11px;
    --text-sm: 12px;
    --text-base: 14px;
    --text-md: 15px;
    --text-lg: 16px;
    --text-xl: 18px;
    --text-2xl: 20px;
    --text-3xl: 24px;
    --text-4xl: 28px;
    --text-5xl: 32px;
    --text-6xl: 40px;
    --text-7xl: 48px;

    --leading-none: 1;
    --leading-tight: 1.2;
    --leading-snug: 1.35;
    --leading-normal: 1.5;
    --leading-relaxed: 1.65;

    --tracking-tighter: -0.5px;
    --tracking-tight: -0.3px;
    --tracking-normal: 0;
    --tracking-wide: 0.3px;
    --tracking-wider: 0.5px;
    --tracking-widest: 1px;
}

/* =============================================
   LAYOUT DIMENSIONS
   ============================================= */

:root {
    --sidebar-width: 240px;
    --sidebar-collapsed: 72px;
    --header-height: 64px;
    --bottom-nav-height: 72px;
    --content-max-width: 1600px;
    --card-width: 280px;
    --card-height-ratio: 0.5625; /* 16:9 */
}

/* =============================================
   TRANSITIONS & ANIMATIONS
   ============================================= */

:root {
    --duration-instant: 50ms;
    --duration-fast: 100ms;
    --duration-normal: 200ms;
    --duration-slow: 300ms;
    --duration-slower: 400ms;
    --duration-slowest: 500ms;

    --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-smooth: cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* =============================================
   Z-INDEX SCALE
   ============================================= */

:root {
    --z-below: -1;
    --z-base: 0;
    --z-raised: 10;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-overlay: 300;
    --z-modal: 400;
    --z-popover: 500;
    --z-tooltip: 600;
    --z-toast: 700;
    --z-max: 9999;
}