/* =============================================
   SWITCHCURRENCY THEME — CSS VARIABLES
   Soft-Tech Teal + Mint Color System
   Based on design.md specifications
   ============================================= */

:root {
    /* ─── TEAL PALETTE (Primary Brand) ─── */
    --teal-50:  #E0F5F7;
    --teal-100: #B3E5EA;
    --teal-200: #80D4DD;
    --teal-300: #4DC3D0;
    --teal-400: #26B6C6;
    --teal-500: #004D5A;
    --teal-600: #004050;
    --teal-700: #003340;
    --teal-800: #002630;
    --teal-900: #001920;

    /* ─── MINT PALETTE (Accent/Light) ─── */
    --mint-50:  #F0FDFB;
    --mint-100: #CCFBF1;
    --mint-200: #99F6E4;
    --mint-300: #66F0D6;
    --mint-400: #BAF3E6;
    --mint-500: #14B8A6;
    --mint-600: #0D9488;
    --mint-700: #0F766E;
    --mint-800: #115E59;
    --mint-900: #134E4A;

    /* ─── NEUTRAL PALETTE ─── */
    --white:       #FFFFFF;
    --gray-50:     #F9FAFB;
    --gray-100:    #F3F4F6;
    --gray-200:    #E5E7EB;
    --gray-300:    #D1D5DB;
    --gray-400:    #9CA3AF;
    --gray-500:    #6B7280;
    --gray-600:    #4B5563;
    --gray-700:    #374151;
    --gray-800:    #1F2937;
    --gray-900:    #111827;

    /* ─── SEMANTIC COLORS ─── */
    --color-primary:     #004D5A;
    --color-primary-hover: #003340;
    --color-primary-light: #BAF3E6;
    --color-primary-subtle: #F0FDFB;

    --color-success:     #27AE60;
    --color-success-light: #E8F8EF;
    --color-warning:     #FF9F43;
    --color-warning-light: #FFF5E8;
    --color-danger:      #FF5B5C;
    --color-danger-light: #FFE8E8;
    --color-info:        #00CFE8;
    --color-info-light:  #E8FAFD;

    /* ─── BACKGROUND SYSTEM ─── */
    --bg-page:           #F9FAFB;
    --bg-surface:        #FFFFFF;
    --bg-elevated:       #F3F4F6;
    --bg-sunken:         #E5E7EB;

    /* ─── TEXT SYSTEM ─── */
    --text-primary:      #111827;
    --text-secondary:    #4B5563;
    --text-muted:        #8299A1;
    --text-on-primary:   #FFFFFF;

    /* Aliases for backward compat (used in admin blade templates) */
    --text-dark:         #111827;
    --text-dark-secondary: #4B5563;

    /* ─── BORDER SYSTEM ─── */
    --border-light:      #F3F4F6;
    --border-default:    #EDF2F4;
    --border-strong:     #D1D5DB;

    /* ─── TYPOGRAPHY ─── */
    --font-family:       'Tajawal', sans-serif;
    --font-size-xs:      12px;
    --font-size-sm:      14px;
    --font-size-base:    16px;
    --font-size-lg:      18px;
    --font-size-xl:      24px;
    --font-size-2xl:     30px;
    --font-size-3xl:     36px;
    --font-size-4xl:     48px;

    --font-weight-regular:  400;
    --font-weight-medium:   500;
    --font-weight-bold:     700;

    --line-height-tight:    1.2;
    --line-height-normal:   1.6;
    --line-height-relaxed:  1.8;

    /* ─── SPACING ─── */
    --space-1:   4px;
    --space-2:   8px;
    --space-3:   12px;
    --space-4:   16px;
    --space-5:   20px;
    --space-6:   24px;
    --space-8:   32px;
    --space-10:  40px;
    --space-12:  48px;
    --space-16:  64px;

    /* ─── BORDER RADIUS ─── */
    --radius-sm:    8px;
    --radius-md:    12px;
    --radius-lg:    16px;
    --radius-xl:    20px;
    --radius-pill:  50px;
    --radius-full:  50%;

    /* ─── SHADOWS ─── */
    --shadow-xs:    0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-sm:    0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --shadow-md:    0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg:    0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl:    0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-soft:  0 2px 10px rgba(0, 77, 90, 0.05);

    /* ─── TRANSITIONS ─── */
    --transition-fast:    150ms ease;
    --transition-normal:  300ms ease;

    /* ─── Z-INDEX ─── */
    --z-dropdown:   100;
    --z-sticky:     200;
    --z-fixed:      300;
    --z-modal-bg:   400;
    --z-modal:      500;
    --z-tooltip:    600;

    /* ─── LAYOUT ─── */
    --header-height:  64px;
    --sidebar-width:  280px;
    --container-max:  1200px;
}
