.space-grotesk-normal {
    font-family: "Space Grotesk", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
  }

  body {
    font-family: "Space Grotesk";
    background-color: #fdf8f1;
  }


  :root {
    --color-base-900: #0B1F3F;      /* Midnight Navy */
    --color-accent-500: #FFD100;    /* Electric Gold */
    --color-surface-50: #FDF8F1;    /* Warm White */
    --color-accent-300: #36C5F0;    /* Sky Teal */
    --color-neutral-800: #333843;   /* Charcoal */
  }
  
  /* Semantics */
  :root {
    --color-primary:   var(--color-accent-500);
    --color-on-primary: var(--color-base-900);
  
    --color-secondary: var(--color-accent-300);
    --color-on-secondary: #FFFFFF;
  
    --color-background: var(--color-surface-50);
    --color-surface:    #FFFFFF;
  
    --color-text-body:  var(--color-neutral-800);
    --color-text-heading: var(--color-base-900);
  
    --color-border: rgba(51,56,67,.12);  /* light charcoal outline */
  }

  body      { background: var(--color-background); color: var(--color-text-body);}
h1, h2    { color: var(--color-text-heading); }

.btn-primary {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.tag-info {
  background: var(--color-secondary);
  color: var(--color-on-secondary);
}

.my-card {
    border-radius: 20px;
    background: #1c2e50;
    backdrop-filter: blur(10px);
    padding: 30px;
    border: 5px solid #D69E2E

    
}

.the-blue {
    color: #18233a;
}

.the-gold-light {
    color:#D69E2E
}
.the-gold {
    color:#ffd100
}
.the-white {
    color:#FDF8F1
}
.the-gray {
    color: #fdf8f1b9
}