@font-face {
    font-family: 'supershiny';
    src: url('./../fonts/SuperShiny.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'lato';
    src: url('./../fonts/Lato-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'gravitas';
    src: url('./../fonts/GravitasOne-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'ubuntu';
    src: url('./../fonts/Ubuntu-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
/* 
:root {
  --bg-color: #FEFDFB;
  --neutal-color: red;
  --surface-color: hsl(0, 0%, 100%);
  --text-color: hsl(0, 0%, 5%);
  --text-muted: hsl(0, 0%, 30%);
  --border-color: #e5e7eb;
  --primary: #2563eb;
  --secondary: #9333ea;
  --hover: #e0f2fe;
  --grid-card-color: #edf2f4;
  --yellow: #e8da19;
  --blue-light: #7091E6;
  --blue-dark: #3D52A0;
  --silver-light: #ADBBDA;
  --card: #f8edeb;

  --star: #60a5fa;
  --macbook: #323a46;
  --editor: #f5fffa;

  --terminal: none;

  --opacity: 1;
  --mobile-menu: none;

  --box-shadow: 0 8px 25px rgba(0,0,0,0.4);
  --box-shadow-hover: 0 15px 35px rgba(0,0,0,0.6);
}
 */


:has(.deployment:checked){
  --terminal: flex;
}

/* 
:has(.theme-mode:checked) {

  --box-shadow: 0 8px 25px rgba(255, 255, 255, 0.15);
  --box-shadow-hover: 0 15px 35px rgba(255, 255, 255, 0.199);
  --star: #facc15;
  --card: #2d3142;
  --bg-color: #0D0D0D;
  --neutal-color: #1A1A1A;
  --surface-color: hsl(0, 0%, 9%);
  --text-color: hsl(0, 0%, 95%);
  --text-muted: hsl(0, 0%, 70%);
  --border-color: #334155;
  --primary: #60a5fa;
  --secondary: #c084fc;
  --hover: #1e40af;

  --grid-card-color: #1f2232;



  --macbook: #d5cfc5;
  --editor: #1E1E1E;
  --opacity: 0;
} */

:has(.hamburgicon:checked){
  --mobile-menu: block;
}


/* ========================
   1️⃣  Default — DARK THEME
   ======================== */
:root {
  --bg-color: #0D0D0D;
  --neutal-color: #1A1A1A;
  --surface-color: hsl(0, 0%, 9%);
  --text-color: hsl(0, 0%, 95%);
  --text-muted: hsl(0, 0%, 70%);
  --border-color: #334155;
  --primary: #60a5fa;
  --secondary: #c084fc;
  --hover: #1e40af;
  --grid-card-color: #1f2232;
  --star: #facc15;
  --card: #2d3142;
  --macbook: #d5cfc5;
  --editor: #1E1E1E;
  --opacity: 0;
  --mobile-menu: none;
  --terminal: none;
  --input: #1A1A1D;
  --input-border: #2d2d31;
  --box-shadow: 0 8px 25px rgba(255, 255, 255, 0.15);
  --box-shadow-hover: 0 15px 35px rgba(255, 255, 255, 0.199);
}

/* ========================
   2️⃣  Light Mode — When Checked
   ======================== */
:has(.theme-mode:checked) {
  --input: #F9FAFB;
  --input-border: #D1D5DB;
  --box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
  --box-shadow-hover: 0 15px 35px rgba(0, 0, 0, 0.6);
  --star: #60a5fa;
  --card: #f8edeb;
  --bg-color: #FEFDFB;
  --neutal-color: red;
  --surface-color: hsl(0, 0%, 100%);
  --text-color: hsl(0, 0%, 5%);
  --text-muted: hsl(0, 0%, 30%);
  --border-color: #e5e7eb;
  --primary: #2563eb;
  --secondary: #9333ea;
  --hover: #e0f2fe;
  --grid-card-color: #edf2f4;
  --macbook: #323a46;
  --editor: #f5fffa;
  --opacity: 1;
}