:root {
    --sidebar-bg: #ffffff;
    --sidebar-text: #374151;
    --main-bg: #f1f5f9;
    --main-text: #111827;

    --theme-bg: #1e293b;

    --theme-social-linkedin: #0077b5;
    --theme-social-github: #181717;
    --theme-social-researchgate: #00ccbb;

    --theme-card-bg: #ffffff;
    --theme-card-shadow: 0 2px 6px rgba(0,0,0,0.08);
    --theme-card-text: #1f2937;
    --theme-card-meta-dark: #555;
    --theme-card-meta-light: #777;
    --theme-card-link: #6366f1;
    --theme-card-link-hover: #4f46e5;    

    --theme-content-divider: rgba(0,0,0,0.08);

    --brightness-disabled: 0.15;

    --error-text: #b91c1c;

    --link: #2563eb;           /* blue-600 */
    --link-hover: #1d4ed8;     /* blue-700 (darker on light) */
    --link-visited: #7c3aed;   /* violet-600 */
    --link-underline: color-mix(in oklab, var(--link) 45%, transparent);
    --link-focus: #22d3ee;     /* matches your focus accents */

    /* contact + button tokens (light) */
    --contact-title: var(--main-text);

    --contact-btn-accent-1: #6366f1;
    --contact-btn-accent-2: #06b6d4;
    --contact-btn-text: #ffffff;
    --contact-btn-shadow-1: rgba(99,102,241,0.28);
    --contact-btn-shadow-2: rgba(6,182,212,0.35);
    --contact-btn-focus: #22d3ee;


    /* Contact Reveiled */
    --email-label: var(--theme-card-meta-light);
    --email-chip-bg: var(--theme-card-bg);
    --email-chip-text: var(--theme-card-text);
    --email-chip-border: rgba(0,0,0,0.08);
    --email-chip-hover-bg: #f8fafc;          /* light hover */
    --email-chip-shadow: 0 8px 18px rgba(2,6,23,0.08);
    --email-accent: var(--theme-card-link);  /* link color if you want text-only style */
    --email-accent-hover: var(--theme-card-link-hover);

}

body.dark {
    --sidebar-bg: #0f172a;
    --sidebar-text: #f1f5f9;
    --main-bg: #1e293b;
    --main-text: #e2e8f0;

    --theme-bg: #f1f5f9;

    --theme-social-linkedin: #ffffff;
    --theme-social-github: #ffffff;
    --theme-social-researchgate: #ffffff;

    --theme-card-bg: #334155;
    --theme-card-shadow: 0 2px 6px rgba(255,255,255,0.05);
    --theme-card-text: #f1f5f9;
    --theme-card-meta-dark: #cbd5e1;
    --theme-card-meta-light: #94a3b8;
    --theme-card-link: #6366f1;
    --theme-card-link-hover: #4f46e5;

    --theme-content-divider: rgba(255,255,255,0.1);

    --brightness-disabled: 0.15;

    --error-text: #fca5a5;

    --link: #60a5fa;           /* blue-400 */
    --link-hover: #93c5fd;     /* blue-300 (lighter on dark) */
    --link-visited: #c4b5fd;   /* violet-300 */
    --link-underline: color-mix(in oklab, var(--link) 60%, transparent);
    --link-focus: #38bdf8;     /* sky-400 */

    /* contact + button tokens (light) */
    --contact-title: var(--main-text);

    --contact-btn-accent-1: #7c3aed;        /* violet-600 */
    --contact-btn-accent-2: #22d3ee;        /* cyan-400 */
    --contact-btn-text: #ffffff;
    --contact-btn-shadow-1: rgba(124,58,237,0.40);
    --contact-btn-shadow-2: rgba(34,211,238,0.35);
    --contact-btn-focus: #38bdf8;           /* sky-400 */


    /* Contact Reveiled */
    --email-label: var(--theme-card-meta-dark);
    --email-chip-bg: var(--theme-card-bg);
    --email-chip-text: var(--theme-card-text);
    --email-chip-border: rgba(255,255,255,0.08);
    --email-chip-hover-bg: #475569;          /* slate-600 */
    --email-chip-shadow: 0 10px 22px rgba(0,0,0,0.35);
    --email-accent: #60a5fa;                 /* blue-400 */
    --email-accent-hover: #3b82f6;           /* blue-500 */
}

.theme-btn:hover {
    transform: rotate(20deg) scale(1.1);
}

.icon{
    position: absolute;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.theme-btn .sun{
    opacity: 1;
}

body.dark .theme-btn .sun{
    opacity: 0;
}

body.dark .theme-btn .moon{
    opacity: 1;
}

/* Button to Change Theme*/
.theme-btn{
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: var(--theme-bg);
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    transition: transform 0.5s;
    z-index: 1000;
}