/* ========================================================
   DevYarn — Design Tokens (theme-vars.css)
   Single source of truth for all colors, shadows, radii.
   Dark mode = default  ·  .light-mode = override
   ======================================================== */

/* =====================================================
   DARK MODE (default)
   ===================================================== */
:root {
    /* ——— Brand Accent ——— */
    --color-accent:         #71ecb6;
    --color-accent-alt:     #bafe6d;

    /* Accent with opacity (used for bg tints, borders, glows) */
    --color-accent-3:       rgba(113, 236, 182, 0.03);
    --color-accent-5:       rgba(113, 236, 182, 0.05);
    --color-accent-6:       rgba(113, 236, 182, 0.06);
    --color-accent-8:       rgba(113, 236, 182, 0.08);
    --color-accent-10:      rgba(113, 236, 182, 0.10);
    --color-accent-15:      rgba(113, 236, 182, 0.15);
    --color-accent-20:      rgba(113, 236, 182, 0.20);
    --color-accent-25:      rgba(113, 236, 182, 0.25);
    --color-accent-30:      rgba(113, 236, 182, 0.30);
    --color-accent-40:      rgba(113, 236, 182, 0.40);
    --color-accent-50:      rgba(113, 236, 182, 0.50);

    --color-accent-alt-5:   rgba(186, 254, 109, 0.05);
    --color-accent-alt-6:   rgba(186, 254, 109, 0.06);
    --color-accent-alt-10:  rgba(186, 254, 109, 0.10);
    --color-accent-alt-20:  rgba(186, 254, 109, 0.20);

    /* ——— Backgrounds (dark → light stack) ——— */
    --color-bg:             #0d0d0d;
    --color-bg-surface:     #151515;
    --color-bg-elevated:    #1a1a1a;
    --color-bg-card:        #242424;
    --color-bg-card-alt:    #2a2a2a;
    --color-bg-muted:       #3a3a3a;
    --color-bg-icon:        #494949;
    --color-bg-hero:        #1D1D1D;
    --color-bg-badge:       rgba(21, 21, 21, 0.6);

    /* Glass / semi-transparent bg */
    --color-bg-glass:       rgba(13, 13, 13, 0.85);
    --color-bg-glass-80:    rgba(13, 13, 13, 0.8);
    --color-bg-navbar:      rgba(13, 13, 13, 0.6);
    --color-overlay:        rgba(0, 0, 0, 0.6);
    --color-overlay-80:     rgba(0, 0, 0, 0.8);

    /* White-opacity glass tints */
    --color-white-3:        rgba(255, 255, 255, 0.03);
    --color-white-4:        rgba(255, 255, 255, 0.04);
    --color-white-5:        rgba(255, 255, 255, 0.05);
    --color-white-6:        rgba(255, 255, 255, 0.06);
    --color-white-8:        rgba(255, 255, 255, 0.08);
    --color-white-10:       rgba(255, 255, 255, 0.10);
    --color-white-40:       rgba(255, 255, 255, 0.40);

    /* ——— Text ——— */
    --color-text:           #f0f0f0;
    --color-text-secondary: #a0a0a0;
    --color-text-muted:     #828282;
    --color-text-dim:       #888888;
    --color-text-subtle:    #777777;
    --color-text-inactive:  #666666;
    --color-text-dimmed:    #555555;
    --color-text-label:     #b0b0b0;

    /* White-opacity text */
    --color-text-w15:       rgba(255, 255, 255, 0.15);
    --color-text-w20:       rgba(255, 255, 255, 0.20);
    --color-text-w25:       rgba(255, 255, 255, 0.25);
    --color-text-w30:       rgba(255, 255, 255, 0.30);
    --color-text-w40:       rgba(255, 255, 255, 0.40);
    --color-text-w50:       rgba(255, 255, 255, 0.50);
    --color-text-w60:       rgba(255, 255, 255, 0.60);
    --color-text-w70:       rgba(255, 255, 255, 0.70);
    --color-text-w80:       rgba(255, 255, 255, 0.80);
    --color-text-w90:       rgba(255, 255, 255, 0.90);

    /* Solid black/white for forced contrast elements */
    --color-black:          #000000;
    --color-white:          #ffffff;

    /* ——— Borders ——— */
    --color-border:         #3a3a3a;
    --color-border-subtle:  #333333;

    /* White-opacity borders */
    --color-border-w4:      rgba(255, 255, 255, 0.04);
    --color-border-w6:      rgba(255, 255, 255, 0.06);
    --color-border-w8:      rgba(255, 255, 255, 0.08);
    --color-border-w10:     rgba(255, 255, 255, 0.10);
    --color-border-w12:     rgba(255, 255, 255, 0.12);
    --color-border-w15:     rgba(255, 255, 255, 0.15);
    --color-border-w20:     rgba(255, 255, 255, 0.20);

    /* ——— Header / Nav ——— */
    --header-bg:            rgba(13, 13, 13, 0.6);
    --header-border:        rgba(255, 255, 255, 0.15);

    /* ——— Drawer / Mobile ——— */
    --drawer-bg:            #111111;
    --drawer-link:          rgba(255, 255, 255, 0.75);
    --drawer-border:        rgba(255, 255, 255, 0.06);

    /* ——— Mega-menu ——— */
    --mega-bg:              rgba(20, 20, 20, 0.95);
    --mega-border:          rgba(255, 255, 255, 0.1);
    --mega-hover-bg:        rgba(113, 236, 182, 0.08);

    /* ——— Popup / Modal ——— */
    --popup-bg:             var(--color-bg-elevated);
    --popup-border:         var(--color-border);

    /* ——— Glass card ——— */
    --glass-bg:             rgba(255, 255, 255, 0.03);
    --glass-border:         rgba(255, 255, 255, 0.08);

    /* ——— Scroll-to-top ——— */
    --scroll-top-bg:        rgba(13, 13, 13, 0.85);
    --scroll-top-border:    rgba(255, 255, 255, 0.1);

    /* ——— Footer ——— */
    --footer-bg:            #1a1a1a;
    --footer-heading:       #f0f0f0;
    --footer-link:          #828282;

    /* ——— Selection ——— */
    --selection-bg:         rgba(113, 236, 182, 0.25);
    --selection-color:      #ffffff;

    /* ——— Semantic feedback ——— */
    --color-error:          #ff6b6b;
    --color-success:        #488548;
    --color-label:          #d0d0d0;

    /* ——— Status badge (project cards) ——— */
    --color-status-live-bg:     rgba(16, 185, 129, 0.70);
    --color-status-live-border: rgba(52, 211, 153, 0.30);

    /* ——— Social brand colors (don't change per theme) ——— */
    --color-facebook:       #3B5998;
    --color-facebook-hover: #294174;
    --color-twitter:        #1DA1F2;
    --color-twitter-hover:  #4db3f3;
    --color-linkedin:       #0077B5;
    --color-linkedin-hover: #3484af;
    --color-whatsapp:       #25D366;
    --color-whatsapp-hover: #48e682;

    /* ——— Radii ——— */
    --radius-sm:            8px;
    --radius-md:            12px;
    --radius-lg:            16px;
    --radius-xl:            24px;
    --radius-full:          9999px;

    /* ——— Shadows ——— */
    --shadow-card:          0 4px 24px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.03);
    --shadow-card-hover:    0 20px 60px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(113, 236, 182, 0.1);
    --shadow-elevated:      0 24px 80px rgba(0, 0, 0, 0.35);
    --shadow-popup:         0 32px 100px rgba(0, 0, 0, 0.8);
    --shadow-play:          0 8px 32px rgba(0, 0, 0, 0.4);
    --shadow-play-hover:    0 12px 48px rgba(113, 236, 182, 0.35);
    --shadow-accent-sm:     0 2px 8px rgba(113, 236, 182, 0.18);
    --shadow-accent-md:     0 4px 12px rgba(113, 236, 182, 0.15);
    --shadow-accent-lg:     0 8px 24px rgba(113, 236, 182, 0.35);
    --shadow-accent-glow:   0 0 20px rgba(113, 236, 182, 0.4);
    --shadow-wa:            0 4px 16px rgba(37, 211, 102, 0.3);
    --shadow-wa-hover:      0 8px 24px rgba(37, 211, 102, 0.4);

    /* ——— Lift / Hover offsets ——— */
    --lift-sm:              -2px;
    --lift-md:              -4px;
    --lift-lg:              -8px;

    /* ——— Transitions ——— */
    --ease-out:             cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ease-spring:          cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-smooth:          cubic-bezier(0.4, 0, 0.2, 1);
    --duration-fast:        0.3s;
    --duration-normal:      0.45s;
    --duration-slow:        0.6s;
}


/* =====================================================
   LIGHT MODE — override only what changes
   ===================================================== */
html.light-mode {
    /* ——— Brand Accent (darker for light bg contrast) ——— */
    --color-accent:         #0fbe7c;
    --color-accent-alt:     #6dba1c;

    --color-accent-3:       rgba(15, 190, 124, 0.03);
    --color-accent-5:       rgba(15, 190, 124, 0.05);
    --color-accent-6:       rgba(15, 190, 124, 0.06);
    --color-accent-8:       rgba(15, 190, 124, 0.08);
    --color-accent-10:      rgba(15, 190, 124, 0.10);
    --color-accent-15:      rgba(15, 190, 124, 0.15);
    --color-accent-20:      rgba(15, 190, 124, 0.20);
    --color-accent-25:      rgba(15, 190, 124, 0.25);
    --color-accent-30:      rgba(15, 190, 124, 0.30);
    --color-accent-40:      rgba(15, 190, 124, 0.40);
    --color-accent-50:      rgba(15, 190, 124, 0.50);

    --color-accent-alt-5:   rgba(109, 186, 28, 0.05);
    --color-accent-alt-6:   rgba(109, 186, 28, 0.06);
    --color-accent-alt-10:  rgba(109, 186, 28, 0.10);
    --color-accent-alt-20:  rgba(109, 186, 28, 0.20);

    /* ——— Backgrounds ——— */
    --color-bg:             #f5f5f7;
    --color-bg-surface:     #eeeef0;
    --color-bg-elevated:    #ffffff;
    --color-bg-card:        #ffffff;
    --color-bg-card-alt:    #f8f8fa;
    --color-bg-muted:       #e0e0e2;
    --color-bg-icon:        #d4d4d6;
    --color-bg-hero:        #e8e8ea;
    --color-bg-badge:       rgba(238, 238, 240, 0.8);

    --color-bg-glass:       rgba(255, 255, 255, 0.92);
    --color-bg-glass-80:    rgba(255, 255, 255, 0.88);
    --color-bg-navbar:      rgba(255, 255, 255, 0.72);
    --color-overlay:        rgba(0, 0, 0, 0.35);
    --color-overlay-80:     rgba(0, 0, 0, 0.6);

    --color-white-3:        rgba(0, 0, 0, 0.02);
    --color-white-4:        rgba(0, 0, 0, 0.02);
    --color-white-5:        rgba(0, 0, 0, 0.03);
    --color-white-6:        rgba(0, 0, 0, 0.04);
    --color-white-8:        rgba(0, 0, 0, 0.05);
    --color-white-10:       rgba(0, 0, 0, 0.06);
    --color-white-40:       rgba(0, 0, 0, 0.08);

    /* ——— Text ——— */
    --color-text:           #1a1a1a;
    --color-text-secondary: #555555;
    --color-text-muted:     #888888;
    --color-text-dim:       #777777;
    --color-text-subtle:    #888888;
    --color-text-inactive:  #999999;
    --color-text-dimmed:    #777777;
    --color-text-label:     #666666;

    --color-text-w15:       rgba(0, 0, 0, 0.15);
    --color-text-w20:       rgba(0, 0, 0, 0.20);
    --color-text-w25:       rgba(0, 0, 0, 0.25);
    --color-text-w30:       rgba(0, 0, 0, 0.30);
    --color-text-w40:       rgba(0, 0, 0, 0.40);
    --color-text-w50:       rgba(0, 0, 0, 0.50);
    --color-text-w60:       rgba(0, 0, 0, 0.60);
    --color-text-w70:       rgba(0, 0, 0, 0.70);
    --color-text-w80:       rgba(0, 0, 0, 0.80);
    --color-text-w90:       rgba(0, 0, 0, 0.90);

    /* ——— Borders ——— */
    --color-border:         #d8d8da;
    --color-border-subtle:  #e0e0e2;

    --color-border-w4:      rgba(0, 0, 0, 0.03);
    --color-border-w6:      rgba(0, 0, 0, 0.05);
    --color-border-w8:      rgba(0, 0, 0, 0.06);
    --color-border-w10:     rgba(0, 0, 0, 0.08);
    --color-border-w12:     rgba(0, 0, 0, 0.10);
    --color-border-w15:     rgba(0, 0, 0, 0.12);
    --color-border-w20:     rgba(0, 0, 0, 0.15);

    /* ——— Header / Nav ——— */
    --header-bg:            rgba(255, 255, 255, 0.72);
    --header-border:        rgba(0, 0, 0, 0.08);

    /* ——— Drawer ——— */
    --drawer-bg:            #ffffff;
    --drawer-link:          rgba(0, 0, 0, 0.75);
    --drawer-border:        rgba(0, 0, 0, 0.06);

    /* ——— Mega-menu ——— */
    --mega-bg:              rgba(255, 255, 255, 0.97);
    --mega-border:          rgba(0, 0, 0, 0.08);
    --mega-hover-bg:        rgba(15, 190, 124, 0.08);

    /* ——— Popup ——— */
    --popup-bg:             #ffffff;
    --popup-border:         #d8d8da;

    /* ——— Glass card ——— */
    --glass-bg:             rgba(255, 255, 255, 0.6);
    --glass-border:         rgba(0, 0, 0, 0.06);

    /* ——— Scroll-to-top ——— */
    --scroll-top-bg:        rgba(255, 255, 255, 0.9);
    --scroll-top-border:    rgba(0, 0, 0, 0.08);

    /* ——— Footer (stays dark) ——— */
    --footer-bg:            #1e1e20;
    --footer-heading:       #f0f0f0;
    --footer-link:          #a0a0a0;

    /* ——— Selection ——— */
    --selection-bg:         rgba(15, 190, 124, 0.2);
    --selection-color:      #000000;

    /* ——— Semantic ——— */
    --color-error:          #dc3232;
    --color-success:        #2e7d32;
    --color-label:          #444444;

    /* ——— Status badge ——— */
    --color-status-live-bg:     rgba(16, 185, 129, 0.80);
    --color-status-live-border: rgba(52, 211, 153, 0.40);

    /* ——— Shadows ——— */
    --shadow-card:          0 4px 24px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.5);
    --shadow-card-hover:    0 20px 60px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(15, 190, 124, 0.12);
    --shadow-elevated:      0 24px 80px rgba(0, 0, 0, 0.12);
    --shadow-popup:         0 32px 100px rgba(0, 0, 0, 0.15);
    --shadow-play:          0 8px 32px rgba(0, 0, 0, 0.12);
    --shadow-play-hover:    0 12px 48px rgba(15, 190, 124, 0.25);
    --shadow-accent-sm:     0 2px 8px rgba(15, 190, 124, 0.12);
    --shadow-accent-md:     0 4px 12px rgba(15, 190, 124, 0.10);
    --shadow-accent-lg:     0 8px 24px rgba(15, 190, 124, 0.20);
    --shadow-accent-glow:   0 0 20px rgba(15, 190, 124, 0.25);
    --shadow-wa:            0 4px 16px rgba(37, 211, 102, 0.2);
    --shadow-wa-hover:      0 8px 24px rgba(37, 211, 102, 0.3);
}