:root {
            --bg-color: #f0fdf4; /* Very light mint paper */
            --surface-color: #ffffff;
            --highlight: #dcfce7;
            --text-main: #064e3b;
            --text-dim: #047857;
            --border-color: #86efac; /* Visible grid lines */
            --accent-color: #16a34a;
            --accent-soft: #22c55e;
            --grid-opacity: 0.15;
        }

        [data-theme="dark"] {
            --bg-color: #020617; /* Deep Navy/Black */
            --surface-color: #0f172a;
            --highlight: #1e293b;
            --text-main: #f0fdf4;
            --text-dim: #94a3b8;
            --border-color: #1e293b;
            --accent-color: #22c55e;
            --accent-soft: #4ade80;
            --grid-opacity: 0.3; /* Subtle grid in dark mode */
        }

        @font-face {
          font-family: "futura";
          src: url("/static/fonts/FUTURA.OTF") format("opentype");
        }

        @font-face {
          font-family: "futura-body";
          src: url("/static/fonts/FUTURA_BODY.OTF") format("opentype");
        }

        @font-face {
          font-family: "arabic";
          src: url("/static/fonts/ARABIC.OTF") format("opentype");
        }

        @font-face {
          font-family: "arabic-body";
          src: url("/static/fonts/ARABIC_BODY.OTF") format("opentype");
        }

        body {
            transition: background-color 0.3s ease, color 0.3s ease;
        }

        /* Graph Paper Grid Effect */
        .bg-paper-grid {
            background-size: 40px 40px;
            background-image: 
                linear-gradient(to right, var(--border-color) 1px, transparent 1px),
                linear-gradient(to bottom, var(--border-color) 1px, transparent 1px);
            opacity: var(--grid-opacity);
            /* Vignette mask */
            mask-image: radial-gradient(circle at center, black 30%, transparent 100%);
            -webkit-mask-image: radial-gradient(circle at center, black 30%, transparent 100%);
        }

        .card-glow {
            position: relative;
            overflow: hidden;
        }
        .card-glow:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 30px -10px rgba(34, 197, 94, 0.2);
        }

        /* Mouse Follower */
        #cursor-blob {
            position: fixed;
            width: 400px;
            height: 400px;
            background: radial-gradient(circle, var(--accent-color) 0%, rgba(0,0,0,0) 70%);
            border-radius: 50%;
            pointer-events: none;
            transform: translate(-50%, -50%);
            z-index: 0;
            opacity: 0.07;
            filter: blur(50px);
            transition: opacity 0.3s ease;
        }