/* ============================================================
   dAppulse Design Tokens — tokens.css
   Single source of truth for all CSS custom properties.

   Synced from: legendary-bassoon/colors_and_type.css
   When upstream tokens change, update :root and [data-theme]
   blocks below to match.
   ============================================================ */


/* ============================================================
   Base tokens — deep-purple is the default / fallback
   ============================================================ */

:root {
    /* --- Color: Background --- */
    --color-bg:                   #1a0a2e;
    --color-bg-alt:               #0f0720;
    --color-surface:              #231340;
    --color-footer-bg:            #0a0415;

    /* --- Color: Accent --- */
    --color-accent:               #9800de;
    --color-accent-2:             #e91e8c;

    /* --- Color: Text --- */
    --color-text:                 #ffffff;
    --color-text-muted:           #c4aee8;

    /* --- Color: Border --- */
    --color-border:               rgba(255, 255, 255, 0.12);

    /* --- Color: Navbar --- */
    --color-nav-scrolled:         rgba(26, 10, 46, 0.97);
    --color-nav-text:             #ffffff;
    --color-nav-text-scrolled:    #ffffff;

    /* --- Color: Hero --- */
    --color-hero-gradient:        linear-gradient(135deg, #1a0a2e 0%, #2d1060 50%, #0f0720 100%);

    /* --- Color: Footer --- */
    --color-footer-text:          rgba(255, 255, 255, 0.55);

    /* --- Color: Form Inputs --- */
    --color-input-bg:             rgba(255, 255, 255, 0.05);
    --color-input-border:         rgba(255, 255, 255, 0.25);
    --color-input-text:           #ffffff;
    --color-input-placeholder:    rgba(255, 255, 255, 0.40);
    --color-input-focus-border:   #9800de;

    /* --- Color: Cards / Surfaces --- */
    --color-stat-bg:              rgba(255, 255, 255, 0.06);

    /* --- Spacing --- */
    --section-pad-y:              80px;
    --section-pad-y-sm:           48px;
    --navbar-height:              68px;

    /* --- Shape --- */
    --border-radius:              4px;

    /* --- Typography --- */
    --font-family:                "Roboto Slab", "Georgia", serif;
    --font-size-base:             16px;
    --font-weight-thin:           100;
    --font-weight-light:          300;
    --font-weight-regular:        400;
    --font-weight-bold:           700;
    --line-height-base:           1.8;
    --line-height-heading:        1.2;
    --letter-spacing-nav:         0.06em;
    --letter-spacing-btn:         0.08em;
    --letter-spacing-label:       0.05em;
}


/* ============================================================
   Theme A — Deep Purple (default)
   ============================================================ */

[data-theme="deep-purple"] {
    --color-bg:                   #1a0a2e;
    --color-bg-alt:               #0f0720;
    --color-surface:              #231340;
    --color-footer-bg:            #0a0415;
    --color-accent:               #9800de;
    --color-accent-2:             #e91e8c;
    --color-text:                 #ffffff;
    --color-text-muted:           #c4aee8;
    --color-border:               rgba(255, 255, 255, 0.12);
    --color-nav-scrolled:         rgba(26, 10, 46, 0.97);
    --color-nav-text:             #ffffff;
    --color-nav-text-scrolled:    #ffffff;
    --color-hero-gradient:        linear-gradient(135deg, #1a0a2e 0%, #2d1060 50%, #0f0720 100%);
    --color-footer-text:          rgba(255, 255, 255, 0.55);
    --color-input-bg:             rgba(255, 255, 255, 0.05);
    --color-input-border:         rgba(255, 255, 255, 0.25);
    --color-input-text:           #ffffff;
    --color-input-placeholder:    rgba(255, 255, 255, 0.40);
    --color-input-focus-border:   #9800de;
    --color-stat-bg:              rgba(255, 255, 255, 0.06);
}


/* ============================================================
   Theme B — Cosmic Dark
   ============================================================ */

[data-theme="cosmic"] {
    --color-bg:                   #0d0d1a;
    --color-bg-alt:               #111128;
    --color-surface:              #191930;
    --color-footer-bg:            #080810;
    --color-accent:               #c044ff;
    --color-accent-2:             #ff3399;
    --color-text:                 #f0eeff;
    --color-text-muted:           #9988cc;
    --color-border:               rgba(192, 68, 255, 0.20);
    --color-nav-scrolled:         rgba(13, 13, 26, 0.97);
    --color-nav-text:             #f0eeff;
    --color-nav-text-scrolled:    #f0eeff;
    --color-hero-gradient:        linear-gradient(135deg, #0d0d1a 0%, #1a0a3e 40%, #0a0a14 100%);
    --color-footer-bg:            #080810;
    --color-footer-text:          rgba(240, 238, 255, 0.50);
    --color-input-bg:             rgba(192, 68, 255, 0.05);
    --color-input-border:         rgba(192, 68, 255, 0.30);
    --color-input-text:           #f0eeff;
    --color-input-placeholder:    rgba(153, 136, 204, 0.60);
    --color-input-focus-border:   #c044ff;
    --color-stat-bg:              rgba(192, 68, 255, 0.08);
}


/* ============================================================
   Theme C — Clean Professional
   ============================================================ */

[data-theme="clean"] {
    --color-bg:                   #ffffff;
    --color-bg-alt:               #f8f6ff;
    --color-surface:              #ffffff;
    --color-footer-bg:            #1a1a2e;
    --color-accent:               #7c3aed;
    --color-accent-2:             #db2777;
    --color-text:                 #1a1a2e;
    --color-text-muted:           #6b6b8a;
    --color-border:               #e5e0f5;
    --color-nav-scrolled:         rgba(255, 255, 255, 0.97);
    --color-nav-text:             #ffffff;           /* over dark hero */
    --color-nav-text-scrolled:    #1a1a2e;           /* on white bg */
    --color-hero-gradient:        linear-gradient(135deg, #2d1b69 0%, #1a0a2e 60%, #3d0f8a 100%);
    --color-footer-text:          rgba(255, 255, 255, 0.55);
    --color-input-bg:             #ffffff;
    --color-input-border:         #d1c4e9;
    --color-input-text:           #1a1a2e;
    --color-input-placeholder:    #9e9eb8;
    --color-input-focus-border:   #7c3aed;
    --color-stat-bg:              #f3f0ff;
}