/* globals.css */

/* Keep your existing Tailwind import */
@import "tailwindcss";

/*
  Removed the @media (prefers-color-scheme: dark) block.
  Set the dark mode colors as the default in :root.
*/
:root {
  --background: #0a0a0a; /* Dark background color */
  --foreground: #ededed; /* Light foreground color */
}

/* Keep your theme rule */
:root inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-gilroy), var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
}

/*
  Removed the @media (prefers-color-scheme: dark) block
  as the dark mode colors are now the default.
*/
/* @media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
  }
} */

/* Add this CSS block to your global stylesheet */
.custom-corner-border {
  position: relative; /* Needed for absolute positioning of pseudo-elements */
  border: none !important; /* Remove any existing border */
  box-sizing: border-box; /* Include padding/border in element's total size */
  /* Optional: Adjust padding if the corner lines feel too close to content */
  /* padding: calc(1.5rem + 2px); // Example: if original padding was p-6 (1.5rem) */
}

.custom-corner-border::before,
.custom-corner-border::after {
  content: ''; /* Required for pseudo-elements to render */
  position: absolute; /* Position relative to the .custom-corner-border parent */
  width: 20px; /* Set the length of the horizontal/vertical corner lines */
  height: 20px; /* Set the length of the horizontal/vertical corner lines */
  /* Use a color that contrasts with the dark background */
  border-color: #374151; /* Example: Tailwind gray-700 equivalent */
  border-style: solid;
  border-width: 0; /* Start with no border, define specific borders below */
  box-sizing: border-box; /* Include the pseudo-element's border in its size */
  z-index: 1; /* Ensure corner is above the content if needed */
}

/* Styles for the Top-Left corner piece (using ::before) */
.custom-corner-border::before {
  top: 0;
  left: 0;
  border-top-width: 2px; /* Thick top border */
  border-left-width: 2px; /* Thick left border */
}

/* Styles for the Bottom-Right corner piece (using ::after) */
.custom-corner-border::after {
  bottom: 0;
  right: 0;
  border-bottom-width: 2px; /* Thick bottom border */
  border-right-width: 2px; /* Thick right border */
}

/*
  To get the Top-Right and Bottom-Left corners as well using this
  pseudo-element approach directly on the card div is not possible
  with just ::before and ::after. You would typically need to:
  1. Add wrapper elements inside your card divs to apply more pseudo-elements.
  2. Use a more advanced CSS technique like border-image or background gradients
     which can be more complex to set up for this specific L-shape effect.

  The code above provides the Top-Left and Bottom-Right corners as requested.
  If you absolutely need all four corners with this style, let me know,
  and we can explore options that might involve slightly restructuring the HTML
  inside the card divs.
*/


/* Keep your existing body styles and add position relative */
body {
  /* These will now use the dark colors defined in :root */
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-gilroy), Arial, Helvetica, sans-serif;
  position: relative; /* Added for positioning context if needed */
}


/* Add the noise effect pseudo-element */
body::after {
  content: ""; /* Required for pseudo-elements */
  position: fixed; /* Cover the entire viewport */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1; /* Place it behind the main content */

  /* --- Noise Effect using SVG Filter --- */
  /* Adjust opacity (e.g., 0.03 to 0.1) to control noise intensity */
  opacity: 0.05; /* You can adjust this value */
  /* Apply the filter using a data URI */
  filter: url('data:image/svg+xml,\
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">\
      <filter id="noise">\
        <feTurbulence type="fractalNoise" baseFrequency="0.65" numOctaves="3" stitchTiles="stitch"/>\
      </filter>\
      <rect width="100%" height="100%" filter="url(%23noise)"/>\
    </svg>\
  #noise');

  /* Prevent the pseudo-element from interfering with mouse events */
  pointer-events: none;
}

/* Optional: Animation styles (keep commented out unless needed) */
/* @keyframes noiseAnimation { ... } */
/* body::after { ... animation: noiseAnimation ... } */
