/* 
 * 
 * this file will contains 
 * Design System Variables
 *
 * 1. Color Palette
 * 2. Semantic Variables
 * 3. Typography
 * 4. Shadows
 * 
 * which can be used in other files as well
 *
 */

:root {
    /*
     * COLOR PALETTE (Never use directly inside components)
     */

    --white: #FFFFFF;
    --black: #000000;

    --gray-50: #F8FAFC;
    --slate-400: #94A3B8;
    --slate-600: #475569;
    --slate-800: #1E293B;
    --slate-900: #0F172A;
    --slate-900-alpha-12: rgba(15, 23, 42, .12);
    --slate-900-alpha-18: rgba(15, 23, 42, .18);
    --slate-900-alpha-25: rgba(15, 23, 42, .25);
    --slate-800-alpha-60: rgba(30, 41, 59, .60);
    --slate-800-alpha-70: rgba(30, 41, 59, .70);
    --gray-100: #F3F4F6;
    --gray-200: #E2E8F0;
    --gray-300: #CBD5E1;
    --gray-400: #A0AEC0;
    --gray-450: #9CA3AF;
    --gray-500: #718096;
    --gray-600: #444444;
    --gray-700: #555555;
    --gray-850: #222222;
    --gray-900: #1A1A1A;
    --gray-950: #111111;
    --gray-975: #0A0A0A;
    --gray-950-alpha-90: rgba(17, 17, 17, .90);

    --black-alpha-02: rgba(0, 0, 0, .02);
    --black-alpha-05: rgba(0, 0, 0, .05);
    --black-alpha-08: rgba(0, 0, 0, .08);
    --black-alpha-50: rgba(0, 0, 0, .50);
    --black-alpha-10: rgba(0, 0, 0, .10);
    --black-alpha-20: rgba(0, 0, 0, .20);
    --black-alpha-25: rgba(0, 0, 0, .25);
    --black-alpha-30: rgba(0, 0, 0, .30);
    --black-alpha-40: rgba(0, 0, 0, .40);
    --black-alpha-60: rgba(0, 0, 0, .60);

    --white-alpha-02: rgba(255, 255, 255, .02);
    --white-alpha-04: rgba(255, 255, 255, .04);
    --white-alpha-05: rgba(255, 255, 255, .05);
    --white-alpha-08: rgba(255, 255, 255, .08);
    --white-alpha-10: rgba(255, 255, 255, .10);
    --white-alpha-18: rgba(255, 255, 255, .18);
    --white-alpha-75: rgba(255, 255, 255, .75);
    --white-alpha-90: rgba(255, 255, 255, .90);

    --yellow-300: #FFDE4D;
    --yellow-400: #F3C623;
    --yellow-400-alpha-03: rgba(243, 198, 35, .03);
    --yellow-400-alpha-08: rgba(243, 198, 35, .08);
    --yellow-400-alpha-10: rgba(243, 198, 35, .10);
    --yellow-400-alpha-12: rgba(243, 198, 35, .12);
    --yellow-400-alpha-14: rgba(243, 198, 35, .14);
    --yellow-400-alpha-15: rgba(243, 198, 35, .15);
    --yellow-400-alpha-20: rgba(243, 198, 35, .20);
    --yellow-400-alpha-25: rgba(243, 198, 35, .25);
    --yellow-400-alpha-30: rgba(243, 198, 35, .30);
    --yellow-400-alpha-35: rgba(243, 198, 35, .35);
    --yellow-400-alpha-40: rgba(243, 198, 35, .40);
    --yellow-400-alpha-45: rgba(243, 198, 35, .45);
    --yellow-500: #D4A017;
    --amber-400: #FBBF24;

    --success: #10B981;
    --success-dark: #059669;
    --success-light: #34D399;
    --success-alpha-10: rgba(16, 185, 129, .10);
    --success-alpha-15: rgba(16, 185, 129, .15);

    --error: #EF4444;
    --error-dark: #DC2626;
    --error-light: #F87171;
    --error-alpha-08: rgba(239, 68, 68, .08);
    --error-alpha-12: rgba(239, 68, 68, .12);

    --info: #2563EB;
    --info-light: #60A5FA;
    /* blue-500 (#3B82F6) tints, used behind the info icons */
    --blue-500-alpha-04: rgba(59, 130, 246, .04);
    --blue-500-alpha-06: rgba(59, 130, 246, .06);
    --blue-500-alpha-08: rgba(59, 130, 246, .08);
    --blue-500-alpha-12: rgba(59, 130, 246, .12);
    --blue-500-alpha-40: rgba(59, 130, 246, .40);
    --neutral-alpha-45: rgba(128, 128, 128, .45);

    /* Social brand colours (share icons) */
    --brand-linkedin: #0A66C2;
    --brand-youtube: #FF0000;
    --brand-instagram-1: #F09433;
    --brand-instagram-2: #E6683C;
    --brand-instagram-3: #DC2743;
    --brand-instagram-4: #CC2366;
    --brand-instagram-5: #BC1888;

    /* More shades and see-through tints, named <colour>-alpha-<percent> */
    --gray-800: #1F2937;
    --black-alpha-04: rgba(0, 0, 0, .04);
    --black-alpha-12: rgba(0, 0, 0, .12);
    --black-alpha-15: rgba(0, 0, 0, .15);
    --black-alpha-18: rgba(0, 0, 0, .18);
    --black-alpha-85: rgba(0, 0, 0, .85);
    --white-alpha-06: rgba(255, 255, 255, .06);
    --white-alpha-12: rgba(255, 255, 255, .12);
    --white-alpha-15: rgba(255, 255, 255, .15);
    --white-alpha-88: rgba(255, 255, 255, .88);
    --white-alpha-98: rgba(255, 255, 255, .98);
    --gray-50-alpha-80: rgba(248, 250, 252, .80);
    --gray-50-alpha-90: rgba(248, 250, 252, .90);
    --gray-100-alpha-70: rgba(243, 244, 246, .70);
    --gray-900-alpha-60: rgba(26, 26, 26, .60);
    --gray-900-alpha-85: rgba(26, 26, 26, .85);
    --gray-900-alpha-95: rgba(26, 26, 26, .95);
    --gray-950-alpha-95: rgba(17, 17, 17, .95);
    --gray-975-alpha-82: rgba(10, 10, 10, .82);
    --yellow-400-alpha-50: rgba(243, 198, 35, .50);
    --info-alpha-08: rgba(37, 99, 235, .08);
    --info-alpha-10: rgba(37, 99, 235, .10);

    /*
     * BRAND COLORS
     */

    --brand-primary: var(--yellow-400);
    --brand-primary-hover: var(--yellow-300);

    --brand-dark: var(--gray-950);

    /*
     * BACKGROUNDS
     */

    --bg-main: var(--white);
    --bg-main-light: var(--gray-50);
    --bg-card: var(--white);
    --bg-navbar: var(--white);
    --bg-footer: var(--brand-dark);
    --bg-dark-panel: var(--brand-dark);


    /*
     * TEXT
     */

    --text-primary: var(--gray-950);
    --text-secondary: var(--gray-700);

    --text-light: var(--white);
    --text-light-secondary: var(--gray-400);

    /* Compatibility aliases used by existing component styles. */
    --color-text-main: var(--text-primary);
    --color-text-muted: var(--text-secondary);
    --color-text-light: var(--text-light);
    --color-text-light-muted: var(--text-light-secondary);

    /*
     * ACCENT
     */

    --color-primary: var(--brand-primary);
    --color-primary-hover: var(--brand-primary-hover);

    --color-accent: var(--brand-dark);
    --color-accent-hover: var(--gray-850);

    /*
     * BORDERS
     */

    --border-card: var(--black-alpha-08);

    --border-hover: var(--brand-primary);

    --border-dark-panel: rgba(255, 255, 255, .08);

    /*
     *  SHADOWS
     */

    --shadow-premium: 0 10px 30px -10px var(--black-alpha-08);

    --shadow-hover: 0 20px 40px -10px rgba(0, 0, 0, .15);

    --shadow-glow: 0 0 20px rgba(243, 198, 35, .10);

    /*
     *  TYPOGRAPHY
     */

    --font-heading: 'Outfit', sans-serif;
    --font-body: 'Inter', sans-serif;

    /*
     *  LAYOUT
     */

    --transition-speed: .3s;

    --border-radius-lg: 16px;
    --border-radius-md: 8px;
}

/*
 * DARK THEME
 */

body.dark-theme {

    /* Backgrounds */

    --bg-main: var(--gray-950);
    --bg-main-light: var(--gray-900);

    --bg-card: var(--gray-900);

    --bg-navbar: var(--gray-975);

    --bg-footer: var(--gray-975);

    --bg-dark-panel: var(--gray-975);

    /* Text */

    --text-primary: var(--gray-100);

    --text-secondary: var(--gray-400);

    --text-light: var(--white);

    --text-light-secondary: var(--gray-500);

    /* Compatibility aliases: redeclared here (not just in :root) because
       :root targets <html> while this rule targets <body> — a var() alias
       declared only on <html> freezes at that element's cascade and won't
       pick up a --text-primary override made on <body>. */
    --color-text-main: var(--text-primary);
    --color-text-muted: var(--text-secondary);
    --color-text-light: var(--text-light);
    --color-text-light-muted: var(--text-light-secondary);

    /* Brand */

    --color-primary: var(--brand-primary);

    --color-primary-hover: var(--brand-primary-hover);

    /* Borders */

    --border-card: rgba(255, 255, 255, .06);

    --border-hover: var(--brand-primary);

    /* Shadows */

    --shadow-premium: 0 16px 40px -16px rgba(0, 0, 0, .40);

    --shadow-hover: 0 20px 48px -12px rgba(0, 0, 0, .60);
}