mininini.css

/* Load Merriweather and Fira Code from Google Fonts */
@import url("https://fonts.googleapis.com/css2?family=Merriweather:wght@300..900&family=Fira+Code:wght@300..700&display=swap");

/* Font and Radius Variables */
:root {
    --monospace-font: "Fira Code", monospace; /* Clean coding font */
    --text-font: "Merriweather", serif; /* Soft serif for warmth and comfort */
    --heading-font: "Merriweather", serif; /* Consistent with text font */
    --radius: 12px; /* Slightly softer corners for a gentler feel */
}

/* Mininini Theme Colors */
:root {
    /* Backgrounds and Foregrounds */
    --background: light-dark(
        #ffffff,
        #0a0a0a
    ); /* Pure white for light, pitch black for dark */
    --background-darker: light-dark(
        #e5e5e5,
        #020202
    ); /* Softer contrast backgrounds */
    --foreground: light-dark(#0a0a0a, #f1f1f1); /* High-contrast text */
    --muted: light-dark(#f0f0f0, #1a1a1a); /* Smooth muted backgrounds */
    --muted-foreground: light-dark(
        #777777,
        #bbbbbb
    ); /* Slightly off-key muted text */

    /* UI Elements */
    --card: light-dark(#fafafa, #151515); /* Minimal card design */
    --card-foreground: light-dark(#222222, #e2e2e2);
    --popover: light-dark(
        #e8e8e8,
        #0d0d0d
    ); /* Popovers with striking contrast */
    --popover-foreground: light-dark(#0f0f0f, #eeeeee);
    --border: light-dark(#444444, #2e2e2e);
    --input: light-dark(#f5f5f5, #111111);

    /* Primary Colors */
    --primary: light-dark(#ff6d00, #ff8800); /* Fiery orange for attention */
    --primary-foreground: light-dark(#ffffff, #f1f1f1);
    --secondary: light-dark(#ff44ff, #aa33aa); /* Playful magenta */
    --secondary-foreground: light-dark(#ffffff, #eaeaea);
    --accent: light-dark(#22aaff, #0055ff); /* Punchy blue for accents */
    --accent-foreground: light-dark(#ffffff, #f0f0f0);

    /* Semantic Colors */
    --error: light-dark(#ff0033, #ff3355); /* Alarm red */
    --success: light-dark(#00cc66, #00aa44); /* Fresh green */
    --destructive: light-dark(#cc0033, #bb0022);
    --action: light-dark(#ffee22, #ffcc00); /* Energetic yellow */
    --link: light-dark(#22aaff, #3366ff); /* Bright link colors */
    --link-visited: light-dark(#8844ff, #6633cc);

    /* Shadows */
    --base-shadow: light-dark(
        hsla(0deg, 0%, 80%, 40%),
        hsla(0deg, 0%, 10%, 60%)
    );
    --base-shadow-darker: light-dark(
        hsla(0deg, 0%, 65%, 40%),
        hsla(0deg, 0%, 5%, 60%)
    );
    --base-shadow-opacity: 10%; /* Slightly more dramatic depth */
}