*,
::after,
::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  /* Base */
  --bg-primary: #0a0f1e;
  --bg-secondary: #111827;
  --bg-tertiary: #1f2937;

  /* Text */
  --text-primary: #f9fafb;
  --text-secondary: #9ca3af;
  --text-muted: #6b7280;

  /* Accent */
  --accent-cyan: #00e0ff;
  --accent-cyan-dark: #00b4d8;
  --accent-cyan-glow: rgba(0, 224, 255, 0.2);

  /* Status */
  --status-online: #10b981;
  --status-warning: #f59e0b;
  --status-offline: #ef4444;

  /* Border */
  --border-light: #1f2937;
  --border-medium: #374151;

  --transition: all 0.3s ease-in-out;


}

@font-face {
  font-family: "vazir";
  src: url("./fonts/vazir/Vazir-Medium-FD-WOL.woff2") format("woff2"),
    url("./fonts/vazir/Vazir-Medium-FD-WOL.woff") format("woff"),
    url("./fonts/vazir/Vazir-Medium-FD-WOL.woff2") format("truetype");
}


/* *********************************************************************************** */
/* >>> Global <<<********************************************************************* */
/* *********************************************************************************** */


body {
  font-family: "vazir", Arial, Helvetica, sans-serif;
  background: var(--bg-primary);
}

a{
  font-size: 1.5rem;
  text-decoration: none;
}



/* *********************************************************************************** */
/* >>> Header <<<********************************************************************* */
/* *********************************************************************************** */

.header{
  height: 100px;
  background: var(--bg-tertiary);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo-text{
  margin-right: 20px;
  color: var(--text-primary);
}

.lauth-wrapper{
  height: 100%;
  border:  2px red dashed;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-left: 20px;
  align-items: start;
}

.auth-btn{
  background: var(--accent-cyan);
  width: 100px;
  border-radius: 5px;
  text-align: center;
  color: var(--text-primary);
  transition: var(--transition);
  
}

.auth-btn:hover{
  color: var(--bg-primary);
  background: var(--accent-cyan-dark);
}