/* ============================================================
   Did3D - Design Tokens & Theme Variables
   Light = default | Dark = data-theme="dark"
   ============================================================ */

:root {
    /* ---- Backgrounds ---- */
    --did-bg:             #ffffff;
    --did-bg-alt:         #f1f5f9;
    --did-surface:        #f8fafc;
    --did-surface-hover:  #e2e8f0;

    /* ---- Text ---- */
    --did-text:           #334155;
    --did-text-muted:     #64748b;
    --did-text-heading:   #0f172a;

    /* ---- Borders & Header ---- */
    --did-border:         rgba(0, 0, 0, 0.08);
    --did-header-bg:      rgba(255, 255, 255, 0.92);
    --did-header-blur:    blur(20px) saturate(180%);

    /* ---- Hero gradient ---- */
    --did-hero-start:     #e8edf5;
    --did-hero-mid:       #dfe6f0;
    --did-hero-end:       #d6dfed;

    /* ---- Shadows ---- */
    --did-shadow-sm:      0 1px 3px rgba(0, 0, 0, 0.08);
    --did-shadow-lg:      0 20px 40px rgba(0, 0, 0, 0.08);

    /* ---- Constants (theme-independent) ---- */
    --did-blue:           #2563eb;
    --did-blue-light:     #3b82f6;
    --did-gold:           #d4a04a;
    --did-gold-light:     #e8c373;
    --did-radius:         8px;
    --did-transition:     0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme="dark"] {
    /* ---- Backgrounds ---- */
    --did-bg:             #0b1120;
    --did-bg-alt:         #131b2e;
    --did-surface:        #1a2238;
    --did-surface-hover:  #1e293b;

    /* ---- Text ---- */
    --did-text:           #e2e8f0;
    --did-text-muted:     #94a3b8;
    --did-text-heading:   #f8fafc;

    /* ---- Borders & Header ---- */
    --did-border:         rgba(255, 255, 255, 0.08);
    --did-header-bg:      rgba(11, 17, 32, 0.92);

    /* ---- Hero gradient ---- */
    --did-hero-start:     #0b1120;
    --did-hero-mid:       #0f1b35;
    --did-hero-end:       #162040;

    /* ---- Shadows ---- */
    --did-shadow-sm:      0 1px 3px rgba(0, 0, 0, 0.3);
    --did-shadow-lg:      0 20px 40px rgba(0, 0, 0, 0.4);
}