/* main.css */
@font-face {
  font-family: 'Inter';
  src: url('app/assets/fonts/Inter-Variable.ttf');
}
@font-face {
  font-family: 'Manrope';
  src: url('app/assets/fonts/Manrope-VariableFont_wght.ttf');
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('app/assets/fonts/SpaceGrotesk-VariableFont_wght.ttf');
}

@font-face {
  font-family: 'Phosphor';
  src: url('app/assets/icons/Phosphor.woff2') format('woff2'),
       url('app/assets/icons/Phosphor.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Phosphor-Fill';
  src: url('app/assets/icons/Phosphor-Fill.woff2') format('woff2'),
       url('app/assets/icons/Phosphor-Fill.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
    --whit:#ecf0f3;
    --ph: #e6e7e9e1;
    --shad:#0000004d;
    /* Blues */
    --hl-blue:#36c1fb; /*highlight*/
    --dk-blue: #1d2939; /* dark blue */
    --glassback: #01263bce; /* dark glassy blue */
    --bg: #101828; /* darker blue */
    --backlight:#001b2798;
    --inblue:#05162028; /* blue background for text inputs */
    --inblue2:#05162041; /* blue background for text inputs */
    --shadblue:#377396ce; /* shadow blue */
    --blue-dk: #37c1fb; /* Dark blue */
    --cyan-vb: #A0F8F8; /* Vibrant cyan */
  
    /* Yellows */
    --yellow-sh: #EFB905; /* Shadow yellow */
    --yellow-lt: #FEE356; /* Light yellow */
    --yellow-md: #FDD41C; /* Normal yellow */
  
    /* Blacks */
    --dblack: #00060a; /* Dark black */
  
    /* Greens (Success) */
    --newG:#44f03c; /* light green new ui DRopay */
    --green-lt: #2DCE89; /* Light green for success highlights */
    --green-md: #28A745; /* Main green for success */
    --green-dk: #1F7A31; /* Dark green for strong emphasis */
  
    /* Reds (Error) */
    --red-lt: #F86C6B; /* Light red for error highlights */
    --red-md: #DC3545; /* Main red for error */
    --red-dk: #B02A37; /* Dark red for strong emphasis */
  
    /* Grays */
    --gray-lt: #f0f0f0; /* Light gray */
    --gray-md: #b0b0b0; /* Medium gray */
    --gray-dk: #505050; /* Dark gray */

    --tgray1:#b0b0b05d;
    --tgray2:#ecf0f33d;
  
    /* Whites */
    --white: #ffffff; /* Pure white */
    --txt: #fffdff; /* Warm white */
    --text-light: #e9f1ff;
    --text-dim: #b6c3d6;
    --blurS: 2px;

    /* root.css for padding and font-size*/
  /* 🧱 Padding / Spacing Scale */
  --p-xxs: 0.25rem;   /* 4px */
  --p-xs: 0.5rem;     /* 8px */
  --p-sm: 0.75rem;    /* 12px */
  --p-md: 1rem;       /* 16px */
  --p-lg: 1.5rem;     /* 24px */
  --p-xl: 2rem;       /* 32px */
  --p-2xl: 3rem;      /* 48px */
  --p-3xl: 4rem;      /* 64px */

  /* 🔤 Font Size Scale (similar to Tailwind) */
  --fs-xxs: 0.625rem;  /* 10px */
  --fs-xs: 0.75rem;    /* 12px */
  --fs-sm: 0.875rem;   /* 14px */
  --fs-base: 1rem;     /* 16px */
  --fs-lg: 1.125rem;   /* 18px */
  --fs-xl: 1.25rem;    /* 20px */
  --fs-2xl: 1.5rem;    /* 24px */
  --fs-3xl: 1.875rem;  /* 30px */
  --fs-4xl: 2.25rem;   /* 36px */
  --fs-5xl: 3rem;      /* 48px */
  --fs-6xl: 3.75rem;   /* 60px */

  /* 🟣 Border Radius Scale */
  --br-none: 0;
  --br-xs: 0.125rem;  /* 2px */
  --br-sm: 0.25rem;   /* 4px */
  --br-md: 0.375rem;  /* 6px */
  --br-lg: 0.5rem;    /* 8px */
  --br-xl: 0.75rem;   /* 12px */
  --br-2xl: 1rem;     /* 16px */
  --br-3xl: 1.5rem;   /* 24px */
  --br-full: 9999px;  /* circle */
    
  --varpad1: 1%;
  --flexImgSize:12vmin;

  }
        ::selection, input::selection{
        background-color:var(--blue-dk);
        color:var(--bg);
      }

body {
  font-family: 'Inter', sans-serif;
  margin: 0;
  background: var(--bg);
  color: var(--txt);
  font-size: .9em;
  font-size: clamp(var(--fs-sm) , 2vw , var(--fs-base));
  box-sizing: border-box;
  line-height: 1.6;
}
html{
  -webkit-font-smoothing: antialiased;
}

/* Base icon class for regular icons */
.ph {
  font-family: 'Phosphor';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Example usage classes (you’ll already have these if copied from Phosphor pack) */
.ph-wallet::before { content: '\e900'; }
.ph-house::before { content: '\e901'; }
/* ...more icons */

/* Base icon class for fill icons */
.ph-fill {
  font-family: 'Phosphor-Fill';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

    html,body{
      background: radial-gradient(1200px 400px at 10% 10%, rgba(96,165,250,0.04), transparent 6%),
                  radial-gradient(1000px 300px at 90% 90%, rgba(110,231,183,0.03), transparent 6%),
                  var(--bg);
      width: 100%;
      overflow-x: hidden;
    }

    /* Header / navbar */
    .navbar-brand .logo-mark{
      width:2em;
      height:2em;
      border-radius:var(--br-full);
      background-color: var(--blue-dk);
      display:inline-block;
      margin-right:10px;
    }
    .fw-bold{
      font-family: 'Space Grotesk', sans-serif;
      color: var(--blue-dk);
    }
    .nav-glass{
      background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
      -webkit-backdrop-filter: blur(6px);
      backdrop-filter: blur(6px);
      border: 1px solid var(--dk-blue);
    }
.dashboard{
  object-fit: fill;
  width: 100%;
  height: auto;
  border-radius: var(--br-xl);
}
.dashboardParent{
  background: var(--dk-blue);
  border-radius: var(--br-3xl);
  padding: var(--p-lg);
  border: 1px solid var(--dk-blue);
  min-height: 320px;
}

.fit {
  height: fit-content !important;
  min-height: 0px;
}

.dashboardParent.fit:hover {
  transform: translateY(-10%);
  box-shadow: 0 0 10px var(--shadblue);
  transition: all .35s ease-in-out;
}

.gs-box {
  border-radius: var(--br-3xl);
  background: var(--dk-blue);
  border: 1px solid var(--dk-blue);
  box-shadow: 0 0 30px var(--backlight);
}

.gs-box:hover {
  box-shadow: 0 0 40px var(--blue-dk);
  transform: translateY(-3px);
}

.btn.primary{
  background-color: var(--blue-dk) !important;
  color: var(--bg) !important;
}

.btn.secondary{
  background-color: transparent !important;
  color: var(--blue-dk) !important;
  border:2px solid var(--blue-dk) !important;
}

li>a{
  color: var(--blue-dk) !important;
}

.footerImg{
  width: 3em !important;
  height: auto;
  border-radius:var(--br-full) !important;
  background-color: var(--blue-dk) !important;
  display:inline-block;
}

body::-webkit-scrollbar{
  background-color: var(--dk-blue);
  border-radius: var(--br-full);
  padding: var(--p-xs);
}
body::-webkit-scrollbar-thumb{
  background-color: var(--shadblue);
  border-radius: var(--br-full);
}