/* 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 */
}

/* Base Colors */
:root {
    --background: light-dark(#e5e9f0, #2e3440);
    --foreground: light-dark(#2e3440, #d8dee9);
    --muted: light-dark(#eceff4, #434c5e);
    --muted-foreground: light-dark(#4c566a, #a3be8c);
    --popover: light-dark(#eceff4, #3b4252);
    --popover-foreground: light-dark(#2e3440, #d8dee9);
    --card: light-dark(#f0f4fc, #3b4252);
    --card-foreground: light-dark(#3b4252, #e5e9f0);
    --border: light-dark(#cbd5e1, #4c566a);
    --input: light-dark(#d8dee9, #3b4252);
    --primary: light-dark(#5e81ac, #88c0d0);
    --primary-foreground: light-dark(#eceff4, #2e3440);
    --secondary: light-dark(#81a1c1, #4c566a);
    --secondary-foreground: light-dark(#2e3440, #eceff4);
    --accent: light-dark(#88c0d0, #5e81ac);
    --accent-foreground: light-dark(#eceff4, #969eb0);
    --ring: light-dark(#81a1c1, #5e81ac);
}

/* Semantic Colors */
:root {
    --destructive: hsl(0deg 100% 65%);
    --destructive-foreground: light-dark(#eceff4, #2e3440);
    --error: light-dark(#bf616a, #bf616a);
    --error-foreground: light-dark(#eceff4, #2e3440);
    --success: light-dark(#a3be8c, #a3be8c);
    --success-foreground: light-dark(#eceff4, #2e3440);
    --action: light-dark(#ebcb8b, #ebcb8b);
    --action-hover: light-dark(#f0d9a8, #eacb8b);
    --action-foreground: light-dark(#2e3440, #2e3440);
    --link: light-dark(#81a1c1, #88c0d0);
    --link-visited: light-dark(#b48ead, #b48ead);
    --stale: hsl(42deg 56% 44% / 25%);
}

/* Shadows */
:root {
    --base-shadow: light-dark(
        hsla(0deg, 0%, 85%, 40%),
        hsla(0deg, 0%, 36%, 60%)
    );
    --base-shadow-darker: light-dark(
        hsla(0deg, 0%, 50%, 40%),
        hsla(0deg, 0%, 50%, 60%)
    );
    --base-shadow-opacity: 5%;
}
