wigwam.css

/* Load JetBrains Mono and Space Grotesk from Google Fonts */
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300..800&family=Space+Grotesk:wght@300..700&display=swap");

/* Font and Radius Variables */
:root {
    --monospace-font: "JetBrains Mono", monospace;
    --text-font: "Space Grotesk", sans-serif;
    --heading-font: "Space Grotesk", sans-serif;
    --radius: 10px; /* Rounded but crisp */
}

/* Wigwam Theme Colors */
:root {
    /* Backgrounds and Foregrounds */
    --background: light-dark(#e6ffe9, #0b1e26); /* Mint green vs. deep teal */
    --background-darker: light-dark(
        #b8dfcc,
        #09171f
    ); /* Muted shades for layering */
    --foreground: light-dark(#1f3026, #b4ffff); /* Forest green vs. icy aqua */
    --muted: light-dark(
        #d2e5de,
        #132b35
    ); /* Soft green-gray vs. dark blue-gray */
    --muted-foreground: light-dark(
        #4b635b,
        #99ccd1
    ); /* Subtle but consistent accents */

    /* UI Elements */
    --card: light-dark(#f0fff7, #102731); /* Light emerald and shadowed aqua */
    --card-foreground: light-dark(#2b3c35, #b8e4ec);
    --popover: light-dark(#daf7e3, #0c2229); /* Bright feedback for popovers */
    --popover-foreground: light-dark(#2a3f36, #b0d9e0);
    --border: light-dark(#b2d5c1, #18434d); /* Greenish borders */
    --input: light-dark(#e8ffe7, #133038); /* Highly interactive fields */

    /* Primary Colors */
    --primary: light-dark(#38c172, #50e3c2); /* Vibrant green vs. aqua */
    --primary-foreground: light-dark(#f4fff6, #d6fff8);
    --secondary: light-dark(
        #f4ca65,
        #5bd4e6
    ); /* Goldenrod vs. electric cyan */
    --secondary-foreground: light-dark(#fff9e5, #e3f9ff);
    --accent: light-dark(#7adf9c, #56c6e6); /* Energetic mint and turquoise */
    --accent-foreground: light-dark(#e9ffef, #e5f8ff);

    /* Semantic Colors */
    --error: light-dark(#e94d4d, #ff6464); /* Striking feedback red */
    --success: light-dark(#32b67a, #5ceab9); /* Vivid green feedback */
    --destructive: light-dark(#d44141, #ff7070);
    --action: light-dark(
        #f3d775,
        #73d9e0
    ); /* Friendly yellow and playful aqua */
    --link: light-dark(#57a8ff, #78ddff); /* Vibrant blue links */
    --link-visited: light-dark(
        #c768ff,
        #b48cff
    ); /* Feedback through purple shifts */

    /* Shadows */
    --base-shadow: light-dark(
        hsla(150, 20%, 60%, 40%),
        hsla(195, 15%, 15%, 60%)
    );
    --base-shadow-darker: light-dark(
        hsla(150, 30%, 50%, 40%),
        hsla(195, 15%, 8%, 60%)
    );
    --base-shadow-opacity: 14%; /* Feedback depth */
}