/* ============================================================
   CHEAT STORE — Design Tokens & Variables
   Neumorphism Dark & Light Theme System (Green Accent: #00e676 / #00c853)
   ============================================================ */

:root, [data-theme="dark"] {
    /* ── Base Dark Surfaces ──────────────────────────────── */
    --bg-base:       #0b0d14;
    --bg-surface:    #121520;
    --bg-raised:     #171b29;
    --bg-deep:       #080a0f;

    /* ── Neumorphism Shadows (Dark Theme) ────────────────── */
    --neu-light:     rgba(255, 255, 255, 0.04);
    --neu-dark:      rgba(0, 0, 0, 0.7);

    --shadow-raised:
        -4px -4px 10px var(--neu-light),
         4px  4px 10px var(--neu-dark);

    --shadow-raised-lg:
        -7px -7px 18px var(--neu-light),
         7px  7px 18px var(--neu-dark);

    --shadow-inset:
        inset -3px -3px 7px  var(--neu-light),
        inset  3px  3px 7px  var(--neu-dark);

    --shadow-inset-sm:
        inset -2px -2px 4px  var(--neu-light),
        inset  2px  2px 4px  var(--neu-dark);

    --shadow-float:
        0 6px 24px rgba(0,0,0,0.65),
        -3px -3px 8px var(--neu-light);

    /* ── Brand Accent: Neon Green ───────────────────────── */
    --accent:        #00e676;
    --accent-dark:   #00b058;
    --accent-light:  #69f0ae;
    --accent-glow:   rgba(0, 230, 118, 0.22);
    --accent-bg:     rgba(0, 230, 118, 0.09);

    --teal:          #00e676;
    --teal-dark:     #00b058;
    --teal-glow:     rgba(0, 230, 118, 0.22);
    --teal-bg:       rgba(0, 230, 118, 0.09);

    --rose:          #ff5252;
    --rose-glow:     rgba(255, 82, 82, 0.22);
    --rose-bg:       rgba(255, 82, 82, 0.09);

    --amber:         #ffab40;
    --amber-glow:    rgba(255, 171, 64, 0.22);
    --amber-bg:      rgba(255, 171, 64, 0.09);

    /* ── Text Palette ────────────────────────────────────── */
    --text-primary:  #f1f5f9;
    --text-secondary:#94a3b8;
    --text-muted:    #64748b;
    --text-inverse:  #0b0d14;

    /* ── Border Lines ────────────────────────────────────── */
    --border:        rgba(255, 255, 255, 0.06);
    --border-hover:  rgba(255, 255, 255, 0.12);
    --border-accent: rgba(0, 230, 118, 0.3);
    --border-teal:   rgba(0, 230, 118, 0.3);

    /* ── Border Radius ───────────────────────────────────── */
    --r-xs:   6px;
    --r-sm:   10px;
    --r:      16px;
    --r-lg:   20px;
    --r-xl:   24px;
    --r-full: 9999px;

    /* ── Spacing ─────────────────────────────────────────── */
    --sp-xs:  4px;
    --sp-sm:  8px;
    --sp:     14px;
    --sp-lg:  20px;
    --sp-xl:  28px;

    /* ── Typography ──────────────────────────────────────── */
    --font:         'Outfit', 'Segoe UI', -apple-system, sans-serif;
    --font-mono:    'JetBrains Mono', monospace;

    --fs-xs:   11px;
    --fs-sm:   12.5px;
    --fs:      14px;
    --fs-md:   16px;
    --fs-lg:   18px;
    --fs-xl:   22px;
    --fs-2xl:  28px;

    /* ── Transitions ─────────────────────────────────────── */
    --ease:        cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out:    cubic-bezier(0, 0, 0.2, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

    --t-fast:   0.15s var(--ease);
    --t:        0.22s var(--ease);
    --t-slow:   0.35s var(--ease);
    --t-spring: 0.38s var(--ease-spring);

    /* ── Layout Sizes ────────────────────────────────────── */
    --sidebar-w:    68px;
    --header-h:     56px;
    --bottom-nav-h: 60px;
    --content-max:  1180px;
    --card-w:       142px;
}

/* ── Light Neumorphism Theme Override ────────────────────── */
[data-theme="light"] {
    --bg-base:       #eef2f7;
    --bg-surface:    #f5f8fc;
    --bg-raised:     #fafcff;
    --bg-deep:       #e2e8f0;

    --neu-light:     rgba(255, 255, 255, 0.9);
    --neu-dark:      rgba(160, 175, 195, 0.45);

    --shadow-raised:
        -4px -4px 10px var(--neu-light),
         4px  4px 10px var(--neu-dark);

    --shadow-raised-lg:
        -7px -7px 18px var(--neu-light),
         7px  7px 18px var(--neu-dark);

    --shadow-inset:
        inset -3px -3px 7px  var(--neu-light),
        inset  3px  3px 7px  var(--neu-dark);

    --shadow-inset-sm:
        inset -2px -2px 4px  var(--neu-light),
        inset  2px  2px 4px  var(--neu-dark);

    --shadow-float:
        0 6px 20px rgba(160, 175, 195, 0.4),
        -3px -3px 8px var(--neu-light);

    --accent:        #00c853;
    --accent-dark:   #009624;
    --accent-light:  #5efc82;
    --accent-glow:   rgba(0, 200, 83, 0.2);
    --accent-bg:     rgba(0, 200, 83, 0.08);

    --teal:          #00c853;
    --teal-dark:     #009624;
    --teal-glow:     rgba(0, 200, 83, 0.2);
    --teal-bg:       rgba(0, 200, 83, 0.08);

    --text-primary:  #0f172a;
    --text-secondary:#334155;
    --text-muted:    #64748b;
    --text-inverse:  #ffffff;

    --border:        rgba(0, 0, 0, 0.06);
    --border-hover:  rgba(0, 0, 0, 0.12);
    --border-accent: rgba(0, 200, 83, 0.35);
    --border-teal:   rgba(0, 200, 83, 0.35);
}